ナビゲーションアイテムの横並び

ナビゲーションには Flexboxを使っています。幅が決まっていないアイテムを均等に整列させるときはFlexboxが便利です。

ここでは、display: flexでアイテムを横並びにし、align-itemsでアイテムの上下方向の位置を揃え、justify-content: space-around で余白を割り振っています。

セクション1のテキスト回り込み

セクション1のテキストを回り込ませるレイアウトではFloatを使っています。FlexboxやGrid Layoutでもテキストが回り込んでいるような見た目に近づけることはできますが、回り込ませることができるのはfloatの特徴です。

特別な理由がなければ、回り込みのレイアウトはFloatと考えてよいでしょう。

セクション2のタイルレイアウト

セクション2は前回の記事で紹介したようなタイル状のレイアウトにGrid Layoutを使っています。

このようなレイアウトはFloatでもFlexboxでもつくることができますが、grid-row(column)-gapを使うことでグリッド間の余白を簡単に調整できることや、名前の通りグリッド(=格子)のレイアウトであるため筆者はGrid Layoutを使いました。

またGrid Layoutではauto-fillminmaxが使えるため、レスポンシブサイト等の幅が伸縮するレイアウトの調整がしやすくなります。

サンプルのまとめ

今回のサンプルでは次の使い分けをしています。

  • ページ全体のレイアウトでは、ページを大きなエリアに分割したレイアウトをするため Grid Layout
  • ナビゲーションでは、 列の中でアイテムを整列させ、アイテムの上下方向の位置を揃えるため Flexbox
  • セクション1では、画像にテキストが回り込むレイアウトをするため Float
  • セクション2では、格子状に並びアイテム間の余白をとったレイアウトをするため Grid Layout

Floatは回り込みFlexboxは整列Grid Layoutは分割・格子などプロパティの特徴をキーワードとして覚えておくと使い分けの判断がしやすいかもしれません。

おわりに

Float、Flexbox、Grid Layoutを使わず、テーブルレイアウトや要素をインラインにしても要素を横並びにはできます。レイアウトをつくる方法がいろいろある中で、プロパティをどう使い分けるかはつくる人の考え方やレイアウトのつくり方によって異なるでしょう。

FloatやFlexboxはレイアウトに使う手法として古い」「Grid Layoutという新しいやり方でレイアウトするのがかっこいい」という意見も正しいと思いますが、CSSプロパティの特徴を知り適材適所で使っていくのが最も望ましいでしょう。