TOMMY こんにちは。01wave冨永です。
みなさんは、上記のようなレイアウトの場合、どのようなコードの書き方をしますか？
レイアウトのコードの書き方は時代の流れとともに変化しています。
現在までに登場してきたコードの書き方をまとめてみました。
HTML「table」レイアウト
「table」は、「表」を利用したレイアウトの書き方です。
レイアウトの書き方の中では、一番はじめに出てきた手法だと思います。
See the Pen XObZwr by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0
HTMLとは、そもそも「文章構造」を記述するものです。
見た目はCSSで行いましょう！ということで、次に出てきたのが、、、
CSS「float」レイアウト
「float」は、「回り込み」を利用したレイアウトの書き方です。
要素を浮かせて左寄せまたは右寄せを行うことで、後に続く内容はその反対側に回り込みます。
要素が浮いているため、「clearfix」を使い浮いてしまった高さ等を調整する必要があります。
少し使い勝手が面倒ですよね…。
See the Pen qgdxQb by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0
CSS「flex」レイアウト
「flex」は、「並べる」ことで表現するレイアウトの書き方です。
CSS3から導入され、現在主流になってきています。
親要素に「flex」を指定することで、簡単に横並びが実装できます。
しかし、入れ子が多くなってしまうなど弱点もあります。
See the Pen xMGYBw by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0
CSS「grid」レイアウト
「grid」は、「格子」で表現するレイアウトの書き方です。
ブラウザで見たままをCSSで表現できます。
また、入れ子が増えないメリットもあります。
今後、主流になる可能性の高いCSSレイアウトのため注目です！
See the Pen YBXegZ by Miyuki Tominaga (@miyuki-tominaga) on CodePen.0
ここで大変便利な機能が「Autoprefixer」です！！
Autoprefixerとは
必要なベンダプレフィックス（各ブラウザのメーカーがCSS3の拡張機能を実装するために先頭に付ける-moz-や-webkit-などの特殊な識別子）を自動で付けてくれる便利なツールのことです。
とてもわかりやすい記事がありましたの、詳しくは下記の記事をご参照ください。
Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年～2018年）
まとめ
現在は「flex」が主流になってきましたが、今後は「grid」が主流になる時期が近いかもしれません。
時代に乗り遅れず、便利なものは吸収していきましょう！
