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ページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ