cssで要素を横並びにする４つの方法

同じデザインを実現するCSSの書き方は一つではありません。
そのデザインを実現するために、どの記述方法を選択するかはコーダーの楽しみの一つです。

今回はWebサイトにおいてよくあるあしらいである、要素を横並びにする方法を4種類ご紹介いたします。

1.”float”を使用する方法。

一番メジャーな方法かもしれません。
要素に回り込みの指定をし、横並びにする方法です。
注意点としては回り込みの解除の指定をしないと後のレイアウトが崩れたり、背景が表示されなかったりします。
cleafixやoverflowを使用して、解除をしましょう。
また、横幅が決まっていない要素を横並びにし、更に中央表示を行なうといった場合にはこの方法は適しておりません。

2.display:inline（inline-block）を使用する方法。

この方法は横幅が決まっていない要素を横並びにし、更に中央表示を行なう時などに使用しています。
フッターに横並びのテキストメニューがあったり、ブログなどのページネーション等に使用しています。
注意点としては要素と要素の間に意図しない隙間ができてしまう場合があります。
これはマージンやパディングをいくら調整しても調整できません。letter-spacingを使って調整しましょう。

3.display:tableを使用する方法。

この方法は要素を横並びにし、要素の幅を均等にしたい場合や、要素の中のテキストなどを天地中央揃えにしたい時等に使用します。
ただし、この方法は親要素に横幅と高さの指定が必要となります。

4.display:flexを使用する方法。

この方法は従来の指定の仕方に変わる方法として注目されている方法です。
横並びにするだけでなく、要素の幅の制御や文字揃えの制御、並び順の制御などできることは多岐にわたっています。
しかし、古いブラウザでは対応しておらず、JSなどでそれをカバーするか、最新ブラウザのみに対応するなどが現状では必要です。

それぞれcssの設定には特徴があり、実現したいレイアウトによって選択することが重要です。