CSSで行列を表現する場合、明らかにこれは表であると判る場合以外ではtableタグは使っちゃダメだそうです。なんでかは知りませんが、それを実践する場合、HTMLとCSSの関係が理解しやすいというのは間違いなくそうであると思います。
具体的にどういうことかと言うと、
このような表があったとします。この表をdivタグで表現した場合、
<style>
.colmun {
display: block;
}
.row {
display: flex;
}
</style>
<div class="row">
<div class="colmun">
<div>1</div><div>2</div><div>3</div>
</div>
<div class="colmun">
<div>4</div><div>5</div><div>6</div>
</div>
<div class="colmun">
<div>7</div><div>8</div><div>9</div>
</div>
</div>
このようになります。（わかりやすくするために、枠線や中央寄せは書いていません）
次は行列を入れ替えてみようと思います。
これをdivタグとCSSで実装するとこうなります。
<style>
.colmun {
display: block;
}
.row {
display: flex;
}
</style>
<div class="colmun">
<div class="row">
<div>1</div><div>2</div><div>3</div>
</div>
<div class="row">
<div>4</div><div>5</div><div>6</div>
</div>
<div class="row">
<div>7</div><div>8</div><div>9</div>
</div>
</div>
全く変わっていないように思えますが、よく見るとdivタグのそれぞれのクラスの中身が入れ替わっています。
これがどういうことかと言うと、CSSはタグの階層構造に依存して効いていることを端的に表していると思います。
つまり、最初のコードのdivタグのクラス、rowに当てられているCSS、display:blockが以下の要素（具体的に言うとclass="colmun"と書かれているdivタグ）に対して効いていて、colmunに当てられているdisplay:flex;が以下の、数字が書き込まれているdivタグに対して効いているので、rowが効いている数字が横並びに、colmunが効いているクラスrowの書かれているdivタグが縦積みになるという理屈になります。
ですので、各々のクラスの実体を入れ替えたら縦横に効くCSSの範囲が逆になるということになります。
ここの理解が一番最初に超えるべき知識だと、特に独学で理解が及ばない点でもあると思いますのでこれを共有したいと記事にしてみました。
最後に、このコードはアメブロでは動きません。実行は単独のHTMLファイルをWebブラウザで開いてください。！DOCTYPEタグやHtmlタグ等、できれば他の必須のタグも書き加えてください。他に、もしお気づきの点がありましたらコメントいただけると幸いです。
