[Web] 横並びにしたDiv要素の高さを合わせる方法

こんにちは、@yoheiMuneです。
今日は、floatとかで横並びにしたDivの高さを揃えたい！！という場合の最近の対策案を学んだので、 ブログに残したいと思います。

横並びにしたDivの高さが揃わない！？

上の文章だけでは何に対する解決策なのかが分かりづらいと思いますので、まずは問題を書きます。
Divを横並びにして、以下のようなレイアウトを作る事があるかと思います。
（ソースコード）

<div style="float:left; width:80%; margin:5px auto;">
<div style="float:left; width:30%; background-color:#fcc;">左側のDIV</div>
<div style="float:left; width:40%; background-color:#cfc;">真ん中のDIV</div>
<div style="float:left; width:30%; background-color:#ccf;">右側のDIV</div>
<div style="clear:left;"></div>
</div>

上記の場合は問題ないのですが、各DIV要素の中身の量がまちまちで、その結果DIVの高さが 揃わない場合に、背景色やレイアウトが崩れて汚く見えてしまいます（以下サンプル）。





（ソースコード）

<div style="float:left; width:80%; margin:5px auto;">
<div style="float:left; width:30%; background-color:#fcc;">左側のDIV<br>ちょっとだけ縦に長い。</div>
<div style="float:left; width:40%; background-color:#cfc;">真ん中のDIV</div>
<div style="float:left; width:30%; background-color:#ccf;">右側のDIV<br>もっと<br>縦に<br>長い。</div>
<div style="clear:left;"></div>
</div>

上記の場合に、「長さがまちまちになるのは嫌！！一番縦長なDIVの高さに全DIVの高さを合わせたい」という場合の 解決策を以下で書きたいと思います。

横並びにしたDIVの高さを揃える

色々な解決策がありますが、最近では「display:table」「display]table-cell」を使う解決策が、 分かりやすい解決策だと思います。
横並びにする要素にdisplay:table-cellを、横並び要素の親要素にdisplay:tableを指定すると、 高さが揃った横並びを作ることが出来ます。


（ソースコード）

<div style="display:table; width:80%; margin:5px auto;">
<div style="display:table-cell; width:30%; background-color:#fcc;">左側のDIV<br>ちょっとだけ縦に長い。</div>
<div style="display:table-cell; width:40%; background-color:#cfc;">真ん中のDIV</div>
<div style="display:table-cell; width:30%; background-color:#ccf;">右側のDIV<br>もっと<br>縦に<br>長い。</div>
</div>

これで、いい感じに高さが揃ったと思います。

display:table-cellを使う時の良い点や注意点

display:table-cellを指定すると、テーブルを構成するセルとしての振る舞いをするので、 以下のような良い点/注意点があります。

• clear:left;などの解除処理をしなくて便利！
• vertical-alignを使って、文字の縦アラインを指定することができる！
• min-heightが効かない。セルの最低高さは指定できないようです。。
• IE7では使えない。でも最近IE7のアクセスはほとんど内から良いかも。

最後に

横並びのDIVの高さを揃えるというシンプルな要件ですが、 今まではfloatをかけてmarginとpaddingのハックの方法（詳しくはこちら）でやるという残念な感じでした。

でもtable-cellを使えるようになると、直感的で分かりやすいし、floatのクリア処理とか無くて便利で良いですね。

HTMLやCSSなどいろんな言語で、理解しやすいソースをかけるよう、今後も頑張りたいものです。
最後までご覧頂きましてありがとうございました(*ﾟ▽ﾟ)ﾉ