要素を横並びにするCSSの4パターン

CSSで要素を横並びにする方法はいくつかあります。

特徴を紹介しますので、条件に合うものを選ぶといいでしょう。

inline-blockパターン

<div class="class1">
 <div class="class2">aaa</div>
 <div class="class2">bbb</div>
 <div class="class2">ccc</div>
 <div class="class2">aaa</div>
 <div class="class2">bbb</div>
 <div class="class2">ccc</div>
</div>
.class1 {
 display: block;
 width: 300px;
 font-size: 0;
}
.class2 {
 display: inline-block;
 width: 100px;
 font-size: 16px;
}
.class2:nth-child(2n) {
 background-color: pink;
}
.class2:nth-child(2n+1) {
 background-color: orange;
}

特徴

inline-blockの親要素にfont-size: 0;を指定しなければ変な余白が入り、widthが上手く機能しません。

親要素にfont-size: 0;を設定し、子要素でfont-sizeを再度設定し直さなければならないという手間が発生します。

その他は特に不便な点はなく、使いやすいのでよく使っています。

floatパターン

横並びと言えば、float一択。CSSの中ではそれくらいの知名度ではないでしょうか。

改めて、floatの書き方を見ていきましょう。

<div class="class1">
 <div class="class2">aaa</div>
 <div class="class2">bbb</div>
 <div class="class2">ccc</div>
 <div class="class2">aaa</div>
 <div class="class2">bbb</div>
 <div class="class2">ccc</div>
</div>
.class1 {
 display: block;
 width: 300px;
 overflow: hidden;
}
.class2 {
 display: block;
 width: 100px;
 float: left;
}
.class2:nth-child(2n) {
 background-color: pink;
}
.class2:nth-child(2n+1) {
 background-color: orange;
}

特徴

floatをかけた要素は高さがなくなります。イメージとしては、浮き上がる感じですね。

ですから、floatが終わったら浮き上がりを解除してあげなければなりません。

解除の方法は3パターンほどありますが、今回はわたしの中で一番オーソドックスな親要素でoverflow: hidden;を実施するという方法をとりました。

CSS初心者の方は、高さが戻らなくてめちゃくちゃなコードになりがちですのでfloatを行う際は注意して開放してあげるようにしてください。

tableパターン


<div class="class1">
 <div class="class3">
 <div class="class2">aaa</div>
 <div class="class2">bbb</div>
 <div class="class2">ccc</div>
 </div>
 <div class="class3">
 <div class="class2">aaa</div>
 <div class="class2">bbb</div>
 <div class="class2">ccc</div>
 </div>
</div>
.class1 {
 display: table;
 width: 300px;
}
.class2 {
 display: table-cell;
 width: 100px;
}
.class3 {
 display: table-row;
}
.class2:nth-child(2n) {
 background-color: pink;
}
.class2:nth-child(2n+1) {
 background-color: orange;
}

特徴

cssでtableを組む方法。

tableなんだから当然横に並びます。注意しないといけないのが、table-cellだけだと親要素の横幅の上限が来ても勝手に改行されないことです。

自分の幅を勝手に小さくして無理やり収まろうとします。

なので、tableで改行したい場合は、htmlのtableのようにtable-rowを用意してあげる必要があるのです(htmlタグではtrに当たる部分)。

htmlタグの組み方が重要になってくるので後からの修正が大変で汎用性は先に紹介した2つに比べると低いと言えます。

というかdisplay: table;にするなら初めからtableタグでhtmlを組めばいいのでは?とわたしは思います・・・。

flexパターン

新勢力であるflexのパターンを紹介します。IE9.0以下は無きものと考えられるのであれば有力なCSSです。

<div class="class1">
 <div class="class2">aaa</div>
 <div class="class2">bbb</div>
 <div class="class2">ccc</div>
 <div class="class2">aaa</div>
 <div class="class2">bbb</div>
 <div class="class2">ccc</div>
</div>
.class1 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
  width: 300px;
}
.class2 {
 display: block;
 width: 100px;
}
.class2:nth-child(2n) {
 background-color: pink;
}
.class2:nth-child(2n+1) {
 background-color: orange;
}

特徴

CSSの横並びの救世主です。

「こういうのがしたかった!」ということがすべて実現できます。これまではハック的な方法を駆使しないとできませんでしたが、flexならデフォルトの機能で可能です。

ただし、まだ登場したばかりのため、サポートされていないブラウザのバージョンをどこまで切り捨てられるかが微妙なところ。

数年後には、横並びはflex一択になっていると思いますが、それまでは他の方法も併用しながら誤魔化していくのが良いでしょう。