オジサン、CSSで要素を横並びにする方法について色々と考察する

HTMLコーダー諸兄は要素の横並びをCSSでスタイリングする場合、どうされているだろうか。 フロート？フレックスボックス？グリッド？ 今年でIE11のサポートが終了し、よりモダンなCSSで案件対応ができるようになった2022年、改めて要素を横並びにする方法について考察してみたい。

ちなみにオジサンがHTMLコーダード新人の頃はtableタグを使う方法が主流であった。SEO対策でサマリー属性にキーワード仕込んだり、余白調整で透明gif画像を使ったりしていたのである。メルマガ等では最近まで使われていたようだ。閑話休題。

さて、以下のデザインカンプを見ていただきたい。

デザインカンプと呼べるかどうかは別として、このような３カラムのコンポーネントがあったとする。あなたならどのような方法を使うであろうか。
因みに技術選定をする場合、まずは自分の参画しているプロジェクトの仕様書またはコーディングガイドラインの対応OSやブラウザを確認し、どの手法で対応するか検討するのがセオリーである。
Webメディア等で良い方法が紹介されていたとしてもそれを鵜呑みにしてコピペするのは悪手である。

さて、オジサンがデザインカンプを確認し、パッと思いつくのは以下の方法である。
１）inline-blockを使用
２）floatを使用
３）flexboxを使用
４）Gridを使用

貴方が参画しているプロジェクトでIE11対応が含まれてるなら、「４）Gridを使用」は外すべきだろう。

IEでGridを使用する場合、ベンダープレフィックスを付与する必要があったり、行を指定する「grid-rows」が必要だったり一手間がかかる。 素直にflexboxでのレイアウトをお勧めする。

さらに古いブラウザやOS（例えばAndroid４！）の対応が含まれているのであればfloatもしくはinlile-blockを使ったレイアウトをお勧めする。 Android４のChromeならまだしも、標準ブラウザでflexboxを使うには色々と制約が大きく、工数に見合った結果を得るのは難しい。

貴方の参画しているプロジェクトが全て最新ブラウザ、最新OSで表示すればOKということであれば、ぜひGridを使ったレイアウトにチャレンジしてもらいたい。

前置きが長くなってしまったが、カンプのデザインを再現するにあたり、それぞれの手法について解説していこうと思う。

inline-blockを使う

一番簡単な方法としてはdisplay: inline-blockを使う方法である。インライン要素とブロック要素の性質を併せ持つインラインブロック要素はインライン要素と同じく内包する要素の幅と高さを初期値に持ち、ブロック要素と同じようにマージンを指定することが可能なディスプレイ属性である。
一行のみの簡易的なレイアウトであればこの方法が最も手軽である。パンくずリスト等で使われているのをよく見かける。
実装時の注意点としては並べる要素のHTMLタグをソース上で改行しないことである。改行してしまうと謎の余白ができてしまい、マージンで余白を完全にコントロールできない。ソースの可読性を考慮し、開業したい場合はタグ間にコメントを入れ、コメント内で改行することで余白の発生を防ぐことができる。

See the Pen Column Block -inline-block by Hiroyuki Ogino (@og_og) on CodePen.

floatを使う

フロートによるレイアウトはClearfixという画期的な発明をしてくれたおかげで爆発的に普及した。 flexboxの実装が各ブラウザで均一になるつい最近まで使われていた。

フロートレイアウトはある要素に対して後続の要素を右あるいは左にを回り込ませるようにして横並びにするテクニックである。
だが、最後尾の要素のフロートを解除しない場合親要素の高さが保てなくなったり、横並びにしたくない次の要素にも影響してしまう為、最後尾の要素直後にフロートを解除する必要がある。

当初はbrタグ等にクラス指定してフロート解除を行っていたが、ある時Clearfixと呼ばれる、CSSの擬似要素上でフロート解除する手法が発明され、ソース上でフロート解除用に無駄なタグを書く必要が無くなり、たちまちデファクトスタンダードになった。
因みに簡易的に親要素にoverflow: hiddenを指定する方法も存在するが、思わぬ表示崩れを引き起こす原因になりうるのでお勧めしない。

See the Pen Column Block float by Hiroyuki Ogino (@og_og) on CodePen.

flexboxを使う

flexboxは現在最もポピュラーな方法と言える。float時代よりもより直感的にコードを書けるようになり、さらに要素の均等並べや、反転も可能になった。
要素の幅のコントロールもwidthプロパティではなく、flexプロパティを使うこと自動計算してくれるようになり、実装がかなり楽になったのである。
また、gapプロパティを指定することで上下左右の余白のコントールが格段に楽になった。ただしこのgapプロパティは最新のOSやブラウザのみの限定的な対応になるので参画しているプロジェクトの対応ブラウザに古いブラウザが含まれている場合は要注意である。

See the Pen Column Block by Hiroyuki Ogino (@og_og) on CodePen.

gridを使う

Gridは最もモダンなレイアウト手法である。flexboxよリ更に直感的なスタイリングが可能である。
Gridの最も特徴的な事は親要素にて振る舞いを指定すれば横ならびにする要素にスタイリングが一切不要なことだ。これらをうまく使うことでレスポンシブ指定の際にメディアクエリで可変する指定を親要素のみに記述すれば良いので非常にメンテナブルでもある。 指定する単位もpxや%以外に、frという単位が使える。これは上記flexと同様直感的な割合で指定でき、例えば均等3カラムであれば、親要素のスタイルに、grid-template-columns: 1fr 1fr 1frと指定することでレイアウトすることが可能なのである。

Gridの便利な部分はこれだけではない。要素の順番や振る舞いを自在にコントロールも可能である。従来は複雑なネストでしか表現できなかったコーディングが親要素の指定のみで可能になるのである。
これだけで1本記事が書けてしまうくらい長くなってしまうので別途記事にまとめるつもりである。

See the Pen Column Block -Grid by Hiroyuki Ogino (@og_og) on CodePen.

まとめ

オジサンの参画しているプロジェクトでIE11サポート廃止が決定し、CSSのガイドラインを見直す機会があり改めて使われているプロパティの棚卸しをする段階で調べた内容を元にオジサンの備忘録として今回記事としてまとめてみた次第。

今回の記事がHTMLコーダーを目指して勉強している諸兄の参考になれば幸いである。

以上