[css] ボックス生成に便利なdisplay:tableとdisplay:table-cell

一昔前ではコーダーと呼ばれた人たちも今ではマークアップエンジニアとちょっとインテリな呼ばれ方をするようになった昨今ですがコーディングをしていると出来るだけシンプルでスマートなソースコードを書きたいと感じる人は多いと思います。しかしながらブラウザの関係からそんな考えも迂回せざるえないシーンがしばしばあると思います。例えばこんな時、

デモ:あるボックス要素を並列に配置 その1

上記では一般的な手法でボックスとなる<div>要素をfloatを定義して並列にしていますが以下の要望に悩まされる事があります。

<ul>
<li>各々のボックスの縦幅を揃えてほしい(固定じゃなく可変サイズで)</li>
<li>ボックス内のテキストを中央揃えや下揃えにしてほしい</li>
</ul>

こんな時は<table>タグを使って回避する人も少なくないと思います。本来<table>タグと同様の制御をCSSを使って定義出来ますがブラウザの関係上なかなか手を出しにくい手法であります。ただ近年のブラウザシェア率も考慮すると”衰退するものにとらわれるより今ある便利なものを活用しよう”の精神がある僕としてはCSSによる手法を活用してもよいのではと思っています。ということで先ほどのデモをCSSで制御した場合が以下になります。

デモ:あるボックス要素を並列に配置 その2

ボックスを囲む親要素にdisplay:tableを定義して<table>タグと同様の仕様にしてあげます。続けて各々のボックス要素にdisplay:table-cellを定義してセルと同様の仕様にしてあげます。これで先の要望を満たすことが可能になります。旧ブラウザは対応していない定義なので依頼主さんには要確認の手法になりますが理解を得られるなら活用してみるのも手だと思います。

  • 2012.06.01
  • お仕事っぽいこと