Webコーディングを行う時に、初心者が悩みがちなトピックとして「どうやって要素を横並びにするか」というものがあります。

要素を横並びにするCSSの書き方として、大きく以下の5つが主要な方法ですね。

  • CSS Flexbox
  • CSS Grid
  • inline-block
  • table-cell
  • float

慣れてしまえば、どの方法を使えばいいのか感覚的に分かるようになりますが、始めは違いも分からなければどれを使えばいいのか分からないはずです。

今回は、CSSで要素を横並びにする方法について「どれを使えばいいのか」「メリットとデメリットは何か」を詳しく説明していきたいと思います。

スポンサーリンク

横並びさせるCSSの選び方

上記に5つの方法をご紹介しましたが、もう先に結論をお伝えしてしまいます。

悩んだらFlexbox使っておけばOKです。

CSSで要素を横並びにするという目的であれば、シンプルかつ細かな調整もしやすく、レスポンシブ対応もしやすいという点でFlexboxが最も扱いやすいのではないでしょうか。

もちろん、場合によってCSS Gridやinline-block、table-cellの方が望ましいケースもありますが、多くの場合が「要素を横並びにする」という目的では無くなってしまっている場合が多く、それは今回の目的とはそれてしまっていますね。

個人的には、レイアウト方法の選び方は下記のようにシンプルでいいと思っています。

  1. Flexboxでそのレイアウトを実現できるか
  2. できないのであれば、どれが適切か

人によってはCSS Gridの方が使いやすいと考える人も多いかもしれませんが、CSS Gridはレイアウト全体の定義に使用する方が向いていて、ただ要素を横並びにするだけであればFlexboxの方がだいぶ楽に実現できますね。

CSS Flexbox

CSS Flexboxは、比較的新しいCSSのレイアウトモジュールで、少し前までブラウザ対応が追いついていませんでしたが、近年では一般的に使われるようになっています。

「Flexboxでレイアウトを実現できるか」を考えるためには、Flexboxを使用するデメリットを理解することが大切です。

そんなFlexboxのメリットとデメリットを整理すると、下記のようになります。

CSS Flexboxのメリット
  • CSSがシンプルな記述で済む
  • 垂直方向の位置を柔軟に調整できる
  • CSSだけで並び順や折り返しを簡単に調整できる
Flexboxのデメリット
  • IEなど一部ブラウザの旧バージョンで思い通りに表示されない
  • 古いバージョンのブラウザではベンダープレフィックスが必要

Flexboxのデメリットについては「古いバージョンのブラウザで表示が崩れる、ベンダープレフィックスを付けなければならない」という点です。デメリットを紹介しているサイトがいくつかありますが、基本的にはすべて「古いブラウザで動作しない」という点に尽きます。

古いブラウザというのは、特にバージョン10以前のIE(インターネットエクスプローラー)とAndroid2.1〜4.3のブラウザを指しています。ただし、そもそもFlexboxに対応していないIEとAndroidブラウザのシェアは足しても1%以下と非常に少なく、クライアント案件で要件に入っていなければ迷わずFlexboxを使ってしまっていいのではないでしょうか。

対応ブラウザとベンダープレフィックスの記述方法は下記で詳しくご説明しています。

どうしても古いIEに対応しなければならない場合は、inline-blockあたりを使用するのがいいと思います。

また、ベンダープレフィックスを付けるのが面倒だという方は、AutoPrefixerを使えば簡単に記述することができます。

AutoPrefixerの導入が面倒だという方は、「Prepros」というSassのGUIコンパイラを導入することで簡単に利用することができます。.scssファイルからの変換はもちろん、.cssファイルからベンダープレフィックスを追加したファイルを出力することもで可能です。

CSS Grid

CSS Gridは比較的新しいCSSの技術で、Flexboxと比較されることが多いレイアウト手法です。

CSS Gridのメリットとデメリットは下記の通りです。

CSS Gridのメリット
  • HTMLをシンプルに書くことができる(レイアウトをあまり意識しなくていい)
  • 要素の折り返しが簡単
  • 垂直方向の位置を柔軟に調整できる
CSS Gridのデメリット
  • 覚えなければいけないことが少し多い
  • IEやEdgeなどのブラウザ対応が少し大変

CSS Gridの大きなメリットは「HTMLを書く時にレイアウトをあまり意識しなくていい」という点です。

本来HTMLは表示したい要素を純粋に並べるためのものなので、レイアウトを意識してしまうとHTMLとCSSを行き来しなければいけない場面が多くなってしまいます。

ただし、CSS Gridは覚えなければならないことが多く、IEなどのブラウザ対応も少しクセが強いので、要素を横に並べたいだけの時はオーバーワークになるかなと思います。

スポンサーリンク

inline-block

inline-blockは、display:inline-blockを指定して要素を横並びに配置する方法です。

inline-blockのメリット
  • コードがシンプルに書ける
  • 要素の折り返しが簡単
  • 古いバージョンのブラウザでも動作する
inline-blockのデメリット
  • 高さを指定しているとvertical-alignが使用できない
  • 謎の隙間ができてしまう

inline-blockもシンプルで要素を横並びにするという目的では適した方法ですが、要素の高さを指定している場合にvertical-alignが指定できないため、垂直方向の位置の調整が少し手間です。

また、HTMLの中の改行部分に隙間が生まれてしまい、50%と50%の要素を並べたはずなのに横並びされないということが起きてしまいます。(これに関しては、font-sizeを0にするか、改行部分を埋めてしまうかで解消できます。)

上記のようなことから、ブラウザ対応が問題なければ、Flexboxを使った方がレイアウト調整が行いやすいですね。

table-cell

table-cellは、display:table-cellを指定して要素を横並びに配置する方法です。

table-cellのメリットとデメリットには下記のようなものがあります。

table-cellのメリット
  • コードがシンプルに書ける
  • 垂直方向の位置を柔軟に調整できる
  • 古いバージョンのブラウザでも動作する
table-cellのデメリット
  • 要素の折り返しができない
  • テキストの改行がやや厄介
  • 要素間の余白をmarginで調整できない

table-cellを使うと、確かに要素を横並びにすることができますが、要素を折り返して表示することができないため、レスポンシブデザインで困ることがしばしばあります。

そもそも、表組みをレイアウトするためのプロパティなので正しい使い方ではないんですね。

float

floatは、float:leftのように指定することによって、要素を横並びに配置する方法です。

floatを使用するメリットとデメリットは

floatのメリット
  • 要素を回り込みさせることができる
  • 古いバージョンのブラウザでも動作する
floatのデメリット
  • 要素が回り込みさせたくない時に使いづらい
  • clearfixを記述しないと表示が崩れてしまう
  • 子要素の高さを揃えることができない(固定値にしない場合)
  • 横幅を均等に揃えることができない

floatを使って要素を横並びにしているコードも依然として多く見られますが、画像とテキストを並べて回り込みさせたい場合以外はfloatを使うことによるメリットがありません。

まとめ

以上のことから、要素を横並びにする場合にどの方法を使えばいいのかという点については下記のように考えれば問題ないでしょう。

  • 基本的にはFlexboxを使えばOK
  • CSS Gridを扱い慣れていればCSS Gridでも問題ない
  • inline-block, table-cell, floatはもう使わない(古いブラウザに対応する場合の選択肢としてはあり)

Flexboxの使い方については、下記の記事を参考にしてください。

おすすめの記事