IE8登場以後はCSS tablesを使ってカラムデザインをシンプルに

Kevin Yank氏によって執筆されたCSS tablesに関する記事が2月28日(米国時間)、SitePointに「Table-Based Layout Is The Next Big Thing」として公開された。IE8がリリースされた以降のWebデザインのテクニックを検討するうえで興味深い内容だ。

現状では複数カラムデザインを持ったのWebページを制作する場合、古典的にはHTMLのtable要素とCSSによるサイズ指定を組み合わせたり、CSSを使う場合でもトリッキーな指定を行わなければならない。最新のCSSの機能を使うとIE6/7などで表示されない問題があるからだ。

こうした状況はIE8の登場からかわることになりそうだ。すでに主要なWebブラウザには導入されているCSS tablesの機能がIE8に導入されるためだ。このため、IE8の普及にあわせて従来の複雑な記述を、CSS tablesを使ったシンプルなものに置き換えられるというわけだ。

CSS tablesの利用例としてKevin Yank氏が用意したものが同機能の利用しやすさを表現する好例といえる。同氏は3列のカラムのページを制作するものとして、ぞれぞれのカラムをdiv要素で用意。左側から順に"navigation"、"content"、"sidebar"のIDを指定。さらにそれらを"body"というIDが指定されたdiv要素に含めておく。

bodyが指定されたdiv要素をテーブルとして表示させるCSS設定

#body {
  border-collapse: collapse;
  display: table;
  table-layout: fixed;
}

HTMLはこれだけだ。あとはCSSでそれらdiv要素をテーブルのように表示するための設定をおこなう。"body"を「display: table;」としてテーブル表示と指定し、"navigation"、"content"、"sidebar"を「display: table-cell;」としてセルとして表示させる。"navigation"の幅は固定とし、"content"、"sidebar"は残りの幅を2:1の割合で表示させている。

中に含んでいるほかのdiv要素をセルとして表示させるCSS設定

#navigation, #content, #sidebar {
  display: table-cell;
}
#navigation {
  width: 200px;
}
#content {
  width: 66%;
}
#sidebar {
  width: 33%;
}

この方法であればHTMLでtableを指定する必要はなく、コンテンツはコンテンツとして制作し、CSSでスタイルを指定するということがスマートに実現できる。入り組んだtable要素のHTMLを編集する必要もない。1月31日(米国時間)にSitePointで公開されたCSSリファレンスドキュメントSitePoint CSS Referenceとともにブックマークしておきたいドキュメントだ。