display: table を使って要素を表組みのように均等配置する

CSSのプロパティ「display: table」を指定すると、テーブル構造で要素が配置されます。floatプロパティのようなpaddingやboderの計算に気を使う必要もなく、すべてのカラムは高さが揃えられてカラム落ちしないレイアウトを実現できます。

メリットの多いプロパティですが、注意点としてはIE7以下で使用できないことがあげられます。
また、セルを結合するcolspan属性やrowspan属性に相当する指定はできません。

メニューに使う

ul要素に「display: table;」を指定し、li要素に「display: table-cell;」を指定します。
table-cellは、td要素のような扱いになります。

なお、「display: table-row;」というtr要素のような扱いになる値も用意されています。

以下は表示例です。

HTMLとCSSのコードは以下になります。
table要素ですので、縦方向の位置はvertical-alignプロパティで指定できます。
ボーダーはすべての幅が1pxになるように調整しています。

コンテンツの段組みに使う

display: table は、高さが決まっていないコンテンツの段組みにもよく使われます。

以下は表示例です。最も高い要素にカラムの高さが揃えらえています。

あいうえお

あいうえお
かきくけこ

あいうえお
かきくけこ

さしすせそ

あいうえお
かきくけこ

さしすせそ
たちつてと

HTMLとCSSのコードは以下になります。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ