TOMMYTOMMY

こんにちは。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

 

新しいものが出現すると「ブラウザの対応がIEへの対応が)」という言葉を耳にします。
ここで大変便利な機能が「Autoprefixer」です!!

Autoprefixerとは

必要なベンダプレフィックス(各ブラウザのメーカーがCSS3の拡張機能を実装するために先頭に付ける-moz--webkit-などの特殊な識別子)を自動で付けてくれる便利なツールのことです。

とてもわかりやすい記事がありましたの、詳しくは下記の記事をご参照ください。
Autoprefixerが進化してCSS GridIE 11対応がバリ楽になった(2017年~2018年)

まとめ

「table」「float」「flex」「grid」どの時代も出てきた時は画期的でしたね!!
現在は「flex」が主流になってきましたが、今後は「grid」が主流になる時期が近いかもしれません。
時代に乗り遅れず、便利なものは吸収していきましょう!

この記事が気に入ったら
いいね ! しよう

Twitter で