2018.10.14

これで解決！ CSSで横並びにする方法

Web制作

こんにちは！　佐々木です。

今回はCSSで要素を横並びにする方法です。

なんだ、ありきたりじゃないか・・・・と思われる方もいるかもしれませんが、
社内で話題になったので、整理がてら記事にしました。

横並びにする方法を大別する

基本的に下記の３種類だけ覚えておけばOK

display:tableを使う
floatを使う
display:flexを使う

display: inline-blockは癖が強いので、使うのは控えた方が良いと思います。

では、下記で解説していきます。

要素の段落ちが必要ない場合は「display: table」を使う

下記のようにします。

RESULT
HTML
CSS
JS

- リスト
- リスト
  リスト
- リスト
  リスト
  リスト

コピー


<ul class="table">
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
</ul>

コピー


.table{
  display: table;
}
.table li{
  display: table-cell;
  background-color: #ff0000;
  color: #ffffff;
  border: 1px solid #000000;
  padding: 15px;
  vertical-align:middle;
}

コピー

display: tableの特性

段落ちしない
要素の高さが自動的に揃う
vertical-align:middleが使えるので、天地中央が簡単

といような特性があります。
並べたい要素が上記に当てはまる場合には、display: tableを使いましょう。
特に、天地中央と高さを揃えたい場合には重宝します。

自動的に段落ちさせたい場合に有効な「float」

下記のようにします。

RESULT
HTML
CSS
JS

- リスト
- リスト
  リスト
- リスト
  リスト
  リスト
- リスト
- リスト
  リスト
- リスト
  リスト
  リスト
- リスト
- リスト
  リスト
- リスト
  リスト
  リスト
- リスト
- リスト
  リスト
- リスト
  リスト
  リスト

コピー


<ul class="float_wrap">
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
</ul>

コピー


.float_wrap{
  display: block;
}
.float_wrap li{
  float:left;
  background-color: #ff0000;
  color: #ffffff;
  border: 1px solid #000000;
  padding: 15px;
  list-style: none !important; /* ブログの都合上importantが入っています。 */
}
.float_wrap li:nth-child(3n+1){
  clear: left;
}

コピー

floatの特性

段落ちする
要素の高さが揃わない

といような特性があります。
並べたい要素が上記に当てはまる場合には、floatを使いましょう。
特に、連続するタグ（ここではli）だけで、何行も表現できるのが使い所です。
display: tableでももちろんできますが、１行ごとにdisplay: tableをした要素を用意する必要があるため、スマートではないですね。
高さを揃える必要がなく、段落ちする必要があれば、迷わずfloatでしょう。
※高さについては、別途、下記のようなjQueryなどを使えば解決できます。
レスポンシブWebデザインに対応した「jquery.heightLine.js」 – to-Rto-RFacebookTwitterGoogle+GitHub

IE10以上の対応であれば、「display: flex」が便利

IE10はベンダープレフィックスが必要ですが、比較的モダンなブラウザをターゲットにしているのであれば、display: flexが便利でしょう。
なぜ、先頭にもってこなかったかというと、今でもIE9対応が多いからです・・・・(TT)

RESULT
HTML
CSS
JS

- リスト
- リスト
  リスト
- リスト
  リスト
  リスト

コピー


<ul class="flex">
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
</ul>

コピー


.flex{
  display: -webkit-box;
  display: -ms-flexbox;/* IE10用 */
  display: flex;
}
.flex li{
  background-color: #ff0000;
  color: #ffffff;
  border: 1px solid #000000;
  padding: 15px;
  list-style: none !important; /* ブログの都合上importantが入っています。 */
  vertical-align: middle; /* tableとは違い、効かない */
}

コピー

段落ちさせることも可能

RESULT
HTML
CSS
JS

- リスト
- リスト
  リスト
- リスト
  リスト
  リスト
- リスト
- リスト
  リスト
- リスト
  リスト
  リスト
- リスト
- リスト
  リスト
- リスト
  リスト
  リスト

コピー


<ul class="flex02">
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
</ul>

コピー


.flex02{
  display: -webkit-box;
  display: -ms-flexbox;/* IE10用 */
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap : wrap;
      flex-wrap: wrap;
  width: 300px;
}
.flex02 li{
  background-color: #ff0000;
  color: #ffffff;
  border: 1px solid #000000;
  padding: 15px;
  list-style: none !important; /* ブログの都合上importantが入っています。 */
  vertical-align: middle; /* tableとは違い、効かない */
}

コピー

天地中央も可能

RESULT
HTML
CSS
JS

- リスト
- リスト
  リスト
- リスト
  リスト
  リスト
- リスト
- リスト
  リスト
- リスト
  リスト
  リスト
- リスト
- リスト
  リスト
- リスト
  リスト
  リスト

コピー


<ul class="flex03">
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
<li>リスト</li>
<li>リスト<br />リスト</li>
<li>リスト<br />リスト<br />リスト</li>
</ul>

コピー


.flex03{
  display: -webkit-box;
  display: -ms-flexbox;/* IE10用 */
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap : wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  width: 300px;
}
.flex03 li{
  background-color: #ff0000;
  color: #ffffff;
  border: 1px solid #000000;
  padding: 15px;
  list-style: none !important; /* ブログの都合上importantが入っています。 */
  vertical-align: middle; /* tableとは違い、効かない */
}