東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2018.10.14

Sasaki

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

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

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

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

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

基本的に下記の3種類だけ覚えておけば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でももちろんできますが、1行ごとに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とは違い、効かない */
    }
    
  • コピー
    
    

display: tableの特性

  • IE10以上から対応
  • 段落ちも可能
  • 要素の高さが自動的に揃う
  • 天地中央(内包する要素ではない)も可能

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


以上です。

特性を理解して、上手に使いこなしましょう!