ブロック要素の横並びと向き合う平成最後の冬。

こんにちは。
平成最後の冬、いかがお過ごしですかな？

冬といえば、要素の横並びですよね。
こんなに寒いと要素をどうやって横並びにするか悩む事はありませんか？
ありますよね。わかります。

HTMLにおいてブロック要素を横並びにする方法はいくつかあります。
今回はそれらをまとめて紹介していきたいと思います。

これぞ横並びの定番！ float:left

要素の横並びと言えばこれが一般的ですね。
私も多様していました。
何かあるとフロート、昨日もフロート、今日もフロート。
便利なフロートですが、横並びした要素の次の要素にclearを設定する必要があったり、解除かうまく出来ていなくてレイアウトかぐちゃぐちゃに。と、少し面倒なのがデメリットです。
作業を楽にするため、

HTML:
<div class="clear"></div>

CSS:
.clear{
    clear:both;
}

という、中身の無いclearプロパティだけあてている空のdivタグをhtmlファイルのfloatを解除したい箇所に挿入した時代が私にはありました。

HTML:
<div class="float-left">左にふろーと</div>
<div class="float-right">右にふろーと</div>
<div class="clear"></div>
<div class="float-right">右にふろーと</div>
<div class="float-left">左にふろーと</div>
<div class="clear"></div>

これは構造的な文章を目的としたHTMLの目的にそぐわず、おすすめ出来ません。
そこで次はHTMLファイルを汚さないようにclearfixを使ってみたり。

HTML:
<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
</ul>

CSS:
ul:after {
    content:"";
    display:block;
    clear:both;
}
li {
    width:25%;
    float:left;
}

clearfixはこんな感じですね。
親要素の擬似要素:afterに上記の3点を設定します。
floatを解除する方法は色々とやり方はありますが、結局一手間かかってしまうのです。

単純だけど便利！display:inline-block;

htmlのタグはブロック要素とインライン要素に分けることが出来ます。
divタグやliタグはブロック要素です。
そのためいくらwidthを小さく設定しても自動で横並びにはなりません。
ブロック要素とは要素そのものの幅の他に、見えない幅が100%(画面全体)に設定されているのです。

そこでcssでそのdiv要素に対し、display:inline-blockと設定し、インラインブロック要素（インライン要素でありブロック要素でもある）として扱ってしまえば横並びになります。

しかし要素間に謎の隙間がうまれます。
画面幅と要素数を計算して要素の幅を均等になるよう設定してもこの謎の隙間のせいでカラム落ちし、レイアウトが崩れることもあります。

HTML:
<ul>
    <li>横並び要素</li>
    <li>横並び要素</li>
    <li>横並び要素</li>
    <li>横並び要素</li>
</ul>

CSS:
li {
    width:25%;
    display:inline-block;
}

要素の親要素に対してfont-size:0を設定するか、letter-spacing:-.4remと設定すれば隙間は消えます。
display:inline-blockは要素の横並びはとても簡単で綺麗なんですが、そのあとの調整が手間な印象です。

便利だけど少しやっかい！flexbox

display:flexと設定し、flexboxにして要素を横並びにする方法もあります。

この方法の良いところはオプションがたくさんあるということですね。
オプションの詳細は割愛しますが、縦横中央寄せに出来たり、全体の幅に合わせて自動で均等割にしてくれたり、レスポンシブなどの画面のレイアウト変更に伴い要素の表示順を変更する、となんでもできます。

なんでもできる分、自由に使いこなすまでにはしっかりと学ぶ必要があります。
また、対応していないブラウザもあり、ベンダープレフィックスを書かなければいけないという手間がかかってしまいます。

flexboxはデフォルトで設定した子要素全てが横一列に表示することになっているので慣れていないと焦ります。
また、flexboxで横に並べた要素は全て高さが一番高い要素に揃います。

HTML:
<ul>
    <li>横並び要素横並び要素横並び要素横並び要素横並び要素横並び要素横並び要素横並び要素</li>
    <li>横並び要素</li>
    <li>横並び要素</li>
    <li>横並び要素</li>
</ul>

CSS:
ul {
    display:flex;
}

li:first-child {
    background:#aaa;
}

簡単に高さがきっちりと揃って便利です。

以外と知らない！？　display:table

知らない人は全く知らないという実は少しマイナーなプロパティです。
マイナーなんですがこれをめちゃめちゃ使っている(むしろこれしか使っていない)サイトもあります。
そのくらい知っていると便利なプロパティです。

display:tableをあてるのは横並びにしたい要素の親要素です。
もし横並びにしたい要素の親要素に横並びにしたい要素以外があれば、新たに横並びにしたい要素のみを含む親要素を記述します。

グローバルナビなどを作りたい場合、liタグを使用しているパターンが多いかと思います。
その場合はliタグ達を囲っている親要素はulタグまたはolタグですね。
この場合は原則として付け足す必要はありません。

その親要素にdisplay:tableとしましょう。
そして横並びにしたい各要素に対し、display:table-cellとします。
これで要素が横並びになります。

要するに要素をテーブルのセルのように扱う。ということです。

レスポンシブの際など、横並びをやめたい時はそれぞれdisplay:block;にします。
これだけで全幅表示の縦並びリストになります。

要素の振る舞いを変える訳です。
なんかかっこいいですね。
八方美人の私にはぴったりです。

テーブルタグと同様ですので、原則外側の余白は開きません。
borderなどを設定したらぴったり隣り合うのが確認出来ます。
border-collapseとborder-spacingプロパティを使い強引に開けることも出来ます。

また、縦方向の位置調整はvertical-alignプロパティで容易に設定ができます。
中央寄せにしたい場合はmiddleを、上揃えにしたい場合はtop、下揃えにしたい場合はbottomとすると簡単に位置が揃います。

縦方向の中央寄せは実装しようと思うと意外と面倒くさいんですよね。
1行の文章か2行の文章かでやり方が変わりますし。

display:tableではネックになる縦方向の位置調整が容易ということで、これだけで使う価値は充分あるのではないでしょうか。

HTML:
<ul>
    <li>横並び要素横並び要素横並び要素横並び要素横並び要素横並び要素横並び要素横並び要素横並び要素</li>
    <li>横並び要素</li>
    <li>横並び要素</li>
    <li>横並び要素</li>
</ul>

CSS:
ul {
    display:table;
    width:100%;
}
li {
    width:25%;
    display:table-cell;
    vertical-align:middle;
}

またtableタグと同等ですので、行ごとの要素の高さが一番高さがある要素に揃います。
すごいですね。

それぞれの特徴

float:left(right) を使った横並び

• 一般的に使われる
• 横並びが終わったらclear属性を使う
• しっかりclearが出来ていないと他のデザインに影響が出る
• 高さを設定しないと揃わない

display:inline-block を使った横並び

• 気軽に実装できる
• デフォルトで余白が設定されている
• インライン要素、ブロック要素の特徴を理解する必要がある
• 高さを設定しないと揃わない

display:flex を使った横並び

• 使い方に少しクセがある
• オプションがたくさんある
• 要素の均等割、表示順の変更などフレキシブルに対応
• ベンダープレフィックスが必要
• 要素の高さが自動で揃う

displa:table を使った横並び

• tableタグのような身近な使い方
• 縦方向の位置調整が容易
• 要素間の余白の設定がめんどくさい
• レスポンシブ時などのデザイン変更が容易
• 要素の高さが自動で揃う

まとめ

今回はHTMLとCSSの基本的な内容について書いてみました。
要素の横並びにはたくさん方法があります。
流行り廃りはあるかもしれませんが、どれを使っても良いと思います。

理想は上記のどんな方法でも横並びに対応できるようにして、案件やプロジェクトごとに使い分けれると良いと思います。
tableタグはレイアウトなどで使用するべきではないと言われていますが、display:tableは含まれるのでしょうか。

display:tableはどんな立ち位置なんでしょうか。
これは平成最後の謎である。