よく使うCSSで要素を横並びにする方法と使い分け

要素を横並びにする方法は多種多様ありますが、その中でも個人的によく使うものと、その使い分けをまとめました。※`display:flex`については説明する事項が多いため、今回は割愛します。flexでええやんというツッコミはお控えいただけると幸いです。

# `display:inline`と`display:inline-block`

以下のように、アイコンにテキストを周りこませるような際などに使用しています。

アイコンを形成する要素に`float:left`を指定しても似たようなレイアウトにはできますが、テキストの縦中央揃えがややめんどうです。
`display:inline-block`はブロック要素として形成されるため、`width`や`height`、`margin`などの指定もできます。加えて、インライン要素のような振る舞いをするので、後続に続くインライン要素は後ろに続くように回り込みます。

今回は、アイコンとテキストで説明しましたが、他にもパンくずリストなどのシンプルな横並びレイアウトの際に使用しています。

![スクリーンショット 2016-01-26 17.29.34.png](https://qiita-image-store.s3.amazonaws.com/0/52375/0842c403-b16e-9c85-6252-88c436a9c745.png)

##HTML
```html
<p class="text"><span class="text__icon">おすすめ></span><a class="text__link">テキストテキスト…</a></p>
```

##CSS
```css
/*装飾のスタイルは省いています。*/
.text__icon {
  display:inline-block;
  vertical-align: middle;
}
.text__link {
  display: inline;
  vertical-align: middle;
}
```

また[改行によって生まれる隙間を消す](http://qiita.com/yukinaka/items/482ede6d6d14f63755d0)必要はありますが、以下のように高さの異なるボックスを綺麗に並べることも可能です。

<img width="304" alt="スクリーンショット 2016-02-01 12.15.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/52375/a042b4db-a8a4-776e-8400-48fbe935e989.png">

ただ、各要素の高さそのものが伸びているわけではないので、背景色やボーダーなどが指定されていて、デザイン的に高さを揃える必要が場合はこの方法は使用できません。

#`display:table`と`display:table-cell`

`display:table`を使用すると要素にtable要素のような振る舞いをさせることが可能になります。

tableのrow(行)のと同じような挙動になるので、要素が増えても段落ちせず、かつ自動で調整をいれたい場合に使用します。例えば、以下のようなナビゲーションなどに使えます。

<img width="932" alt="スクリーンショット 2016-02-02 12.20.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/52375/8d5dcef5-9378-3298-f408-6bdd29965986.png">

## HTML

```html
<ul class="nav">
    <li class="nav__item"><a href="#">WORKS</a></li>
    <li class="nav__item"><a href="#">NEWS</a></li>
    <li class="nav__item"><a href="#">RECRUIT</a></li>
    <li class="nav__item"><a href="#">ABOUT</a></li>
    <li class="nav__item"><a href="#">CONTACT</a></li>
</ul>
```

##CSS
```css
/* スタイル適当です */
.nav {
    display: table;
    width: 100%;
    background: #FFF;
}
.nav__item {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.nav__item + .nav__item {
    border-left: 1px solid #CCC;
}
.nav__item a {
    display: block;
    padding: 15px 0;
    color: #666;
    text-decoration: none;
    font-size: 14px;
}
```

要素が増減があっても自動で伸縮するので、よほどのことでない限り、レイアウトが保たれます。

また上の例では中の要素(テキスト)に応じて、それぞれ自動で幅が決まりますが、`display:table`を指定している`.nav`に`table-layout:fixed`を指定すると、固定レイアウトになり、`.nav__item`に幅の指定がない場合、均等に幅が配置されます。

<img width="1151" alt="スクリーンショット 2016-02-02 12.27.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/52375/2f681955-5e2a-73c1-3e1c-319478e997a2.png">

#`float`

他にも色々と用途はありますが、例をあげると、カラムレイアウトや、以下の画像とテキストが横並びになっているコンポーネントを作成するような際に使用しています。

<img width="984" alt="スクリーンショット 2016-02-02 14.42.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/52375/14ca0674-a743-2118-09fb-977fc2d8393b.png">

##HTML
```html
<div class="media">
    <div class="media__image">
        <img src="foo.png" alt="">
    </div>
    <div class="media__summary">
        <h2 class="media__heading">見出し見出し</h2>
        <p class="media__text">テキスト〜</p>
    </div>
</div>
```

##CSS
```css
.media {
    background: #FFF;
    padding: 10px;
    overflow: hidden;
}
.media__image {
    float: left;
    margin-right: 10px;
}
.media__summary {
    overflow: hidden;
}
.media__heading {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
```

`float`は**浮動化**と**後続する内容の流し込み**という特殊な2つの特性をもっています。

前述の例でいうと、`.media__image`に`float:left`を指定することにより、`.media__image`の要素が文字通り浮きます。

浮いてしまうことにより、親の要素(`.media`)が中身の高さを認識できなくなるため(今回はテキストの要素の方が大きいためどちらにせよ認識しますが)、`.media`要素に`overflow:hidden`を指定し`.media__image`の高さも包括して計算するようにしてあげます。
※clearfixについては割愛します。

後続する要素に何も指定がない場合、以下の画像のように、画像の部分にテキストが回り込みますが、隣接する要素(`.media__summary`)に`overflow:hidden`を指定してあげると、テキストの回り込みを防ぎ、2カラムのレイアウトが作成されます。

<img width="987" alt="スクリーンショット 2016-02-02 15.47.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/52375/c84cdaf6-6d51-26df-6199-419556e9d9e3.png">

似たようなレイアウトは`display:table`を使用しても作成できますが、「やっぱりテキストを回り込むようにしたい！」などと言われた時に、全部指定し直すことになります。逆に「画像とテキストを縦位置中央揃えにしたい」と言われたりすると、`float`だとうまくレイアウトを作れないので、`display:table`を使用するのが好ましいです。何がベストの組み方かはそのときどきの状況で判断するしかありません。

今回はCSS3以降のプロパティについては省略しましたが、横並びにする方法は他にも多々あります。その場その場でどの方法が最善かを選ぶのは難しいかもしれませんが、強いていうなら、**分かりやすさ**(absoluteなどで強引に作らない)や**汎用性の高さ**(トルツメしてもレイアウトが保たれる)などを基準としてもいいかもしれません。