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

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

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

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

横並びさせるCSSの選び方

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

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

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

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

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

CSS Flexbox

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

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

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

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を書く時にレイアウトをあまり意識しなくていい」という点です。

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

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

inline-block

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

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

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

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

table-cell

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

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

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

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

float

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

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

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

まとめ

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

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

おすすめの記事