CSSのレイアウトの歴史

はじめに

これは新人教育用で軽いCSSの問題やらを作ろうとして、備忘録的にまとめたものです。
CSSでレイアウトを設定するにあたって使うプロパティの歴史についてを書き留めました。
内容としては深くないですが、こんなのあったんだーと思い返してください。

1.テーブルレイアウト-table layout-

See the Pen jOOgjpm by k1-web (@k1-web) on CodePen.

当時を知らないので、他の人に聞きながらこんな風かなーと実装していました。
現代から見ると、無理やりテーブルでどうにかしてる感がすごい・・・。
ただやってることを考えると、flexboxに近いのかな？って思えてきます。
ただ全部テーブルって今やるとなると中々にフラストレーションたまります。

2.フロートプロパティ-float property-

See the Pen oNNKrmR by k1-web (@k1-web) on CodePen.

flexboxやgridなどに至っていない人はまだ結構現役なのかな？と思われるプロパティ。
昨今は基本的に::after疑似要素にclearfix（フロート解除）を付けていますが、あえて懐かしい空divで解除してみました。
自分自身としては、もうすでにflexboxがメインになってしまっているので、使うことはないだろう・・・というプロパティです。
ただやはり左右に並んで配置したいときに使うプロパティとしては長らく使用されていました。
clearfixがないとレイアウトが総崩れしてしまうっていうのが無ければ、まだまだ使えたのかな？と思うところもあります。

3.インラインブロック-inline block-

See the Pen MWWNMNG by k1-web (@k1-web) on CodePen.

display: inline-block;を使ったレイアウト、floatでのめんどくさいレイアウトが総崩れはありません。
ただし、要素の幅をびたびたに設定するとなぜかコンテンツとの間に余白がでてしまいます。
それはinline-blockという文字状態を装ったブロック要素になるため、
letter-spacingなどの文字間プロパティが効いてしまいます・・・
そのため、一度font-sizeやletter-spacingを無効にして再度設定しないといけないという煩わしさがあります。
floatはレイアウトするために要素を追加しなければならなく、
inline-blockはプロパティを追加しなければならないという感じになりました。
でも、使い勝手としてはfloatより断然扱いやすいので、ie10前とか対応したい場合はinline-blockを使えばいいと思います！

4.フレキシブルボックス-flexible box-

See the Pen wvvVVKd by k1-web (@k1-web) on CodePen.

古いブラウザでもベンダープレフィックスを使えばie11から対応しているdisplay: flex;です。
floatや、inline-blockで追加していたものはなくなりました・・・！
プロパティが多いのでとっかかりはなかなか難しいですが、かなり使いやすく自由度が高いです。
レイアウト自体の調整の他に、flex-directionを使用すれば、上下の配置にしたり、左右逆で配置など向きの変更が簡単です。
さらに子要素に与えるorderプロパティを使えば、表示順序の並べ替えなどもできます！

5.グリッドレイアウト-grid layout-

See the Pen vYYooxK by k1-web (@k1-web) on CodePen.

ie11に対応が厳しい（-ms-が必要）のため、実践的に使ったことはありませんが、試してみるとこんな感じ。
全体的なレイアウトは簡単にしていできたのでいいなーと思いました。
セクショニングレベルにはgrid layout、インナーのアイテムの並びにはflexboxってのが今後のデフォになってるみたいです。
各要素に名前を持たせて、親要素で制御するっていうのはなんかプログラムに近い発想かなーと思ってます。
ie11に完全対応orもうなくなるとかではないかぎり実践で使うことはないかなーとは思います・・・

あとがき

実際に古きレイアウトを作ってみてやりにくさや別の視点があったり、
そのあと新しいものをしてみるとこの歴史があってこその仕様だったんだなーと思うところがあったり、
新人教育として備忘録にしたかったものですが、なかなか勉強になりました。

経験のないtable layoutとgrid layoutに関しては、もーちょいちゃんとやりたかったなーと思ってます。
今後もこの記事をちょくちょく修正していきたいと思います。