- 公開日
- 更新日
要素を横並びにする5つの方法と各々のメリット・デメリット
お久しぶりです、クロコロールの熊田です。
気がつけば4ヶ月もブログをサボってました…
今年はちゃんとブログを書いていこうと思います、多分。
さて今日はCSSの基礎として要素を横並びにする5つの方法について解説していきたいと思います。
目次
1. inline
メリット
・超お手軽。横並びにしたい要素にたった一行display: inlineを指定するだけ。
デメリット
・インライン要素にするとwidth・heightを指定できない。
・上下のmarginを指定できない。
・要素間に隙間ができる。
隙間ができるのは親要素にfont-size: 0を設定し、子要素で再度font-sizeを設定することで回避することができます。
ただ全然お手軽じゃないですよね。
使い所
正直ピクセルパーフェクトなデザインには不向きだと思います。
使い所としてはパンくずリストなどのテキストを横並びしたい時ぐらいでしょうか。
2. inline-block
メリット
・inline同様に超お手軽。ブロック要素と同様にwidth・height・上下のmarginも指定できるいいとこ取り。
・サンプルにある通りtext-alignとvertical-alignの両方が使える。
デメリット
・インライン要素と同様に要素間に隙間ができる。前述のインライン要素同様の方法で回避可能。
使い所
ピクセルパーフェクトなデザインにしたい場合は後述のfloatの方が手軽かと思います。
text-alignとvertical-alignの両方が使いたい時でしょうか。
3. float
メリット
・古いブラウザでもきちんと表示される。
・「回り込み」が可能。
デメリット
・width・padding・marginを正確に設定しなければ即カラム落ち。
・「上揃え」しかできない。
・後続の要素が隙間に入り込むためfloatを解除したい場合は後続要素にclearを設定。適切な後続要素が無い場合は親要素にoverflow: hidden or display: flow-root、或いはclearfixハックを使う必要がある。
使い所
・シンプルな「上揃え」の横並び。
・下記サンプルのような「回り込み」。
4. table
メリット
・vertical-alignが使える。
・Flexboxよりは古いブラウザにも対応していて（IE8以降）、ベンダープレフィックスも不要。
・子要素にtable-layout: fixedを設定することで幅を等間隔に自動調整してくれる。（子要素の増減によるwidthの調整が不要な保守性の高いCSSの実現）
デメリット
・折返しができない。
・子要素にdisplay: table-cellを設定するため、子要素をflexコンテナにできない。
使い所
・vertical-alignを使いたい場合。
・サンプルにもあるような項目数が増減する可能性のある等間隔のメニューなど
正直使い勝手が悪くFlexboxでも同様の表現ができるので、古いブラウザへの対応やCSSの簡素化をしたい場合でもない限り積極的に使う理由はないと思います。
5. Flexbox
メリット
・横方向・縦方向・逆方向など柔軟な整列が可能。
・等間隔の整列の場合、親要素・子要素のサイズを適切に設定すればmarginを気にする必要はない。
・align-itemsによる要素の水平中央揃え、下揃えが可能、ベースライン揃えが可能。
・要素の表示上の順番の入れ替えが可能。よってデザインに縛られにくいセマンティックなHTMLの記述が可能に。
デメリット
・IE9以前など古いブラウザには未対応。
・ベンダープレフィックス地獄によるCSSの肥大化（サンプル参照）。
まとめ
Flexboxの登場により要素の横並べ・整列は格段に楽になりました。
またIE10以前は2017年4月にマイクロソフトのサポートが切れたことにより現在はFlexboxを遠慮無く使ってもいい環境が整ったと言ってもいいと思います。
とはいえFlexboxはベンダープレフィックスをちゃんと書くとCSSが肥大化しますし、floatなどの”枯れた技術”でレイアウトが再現可能であればそちらを優先するほうがCSSのシンプルさ・古いブラウザの対応への両面でベターだと考えます。
個人的結論
・inline-block or float or tableで再現可能かをまず考慮する。
・justify-content、align-items、orderを使いたければFlexbox。
それではまた次回。
熊田 賢太郎
最新記事 by 熊田 賢太郎 (全て見る)
- Google Mapのマーカーを好きな画像に変更する。 - 2024年1月15日
- ブラウザ別に適用させるCSSハック - 2023年12月26日
- RSSフィードが読み込めない！原因は… - 2021年11月10日
