いきなりですが、例えば下図のような左右のカラムが固定で、
中央のカラムが可変というような3カラムのレイアウトを作りたい場合、通常CSSではfloatを使います。
ただしカラムレイアウトはdisplay: table-cellでも表現できます。
display: table-cellとは、テーブルの構造を表現できるCSSプロパティで
IE8から対応しています。今回はこの2つの方法を比較してみたいと思います。
まず最初にfloatで3カラムレイアウトを表現する場合、下記のようなHTMLとCSSになります。
【HTML】
<div id=”warrper”>
<div id=”l_navi”>ナビゲーション</div>
<div id=”content”>
<div id=”content_inner”>コンテンツ</div>
</div>
<div id=”r_side”>右サイドバー</div>
</div>
【CSS】
#l_navi {
float: left;
width: 200px;
margin-right: -200px;
background-color: #ff0000;
}
#content {
float: left;
width: 100%;
}
#content_inner {
margin: 0 200px;
background-color: #ffffff;
}
#r_side{
float: left;
width: 200px;
margin-left: -200px;
background-color: #009900;
}
上記のようにマイナスマージンを使ったり、真ん中のカラムをdiv要素で余分に囲ったりなど、
結構複雑な記述になります。floatを使っているので、clearも必要になります。
一方、display: table-cellで3カラムレイアウトを表現する場合、下記のようなHTMLとCSSになります。
【HTML】
<div id=”warrper”>
<div id=”l_navi”>ナビゲーション</div>
<div id=”content”>コンテンツ</div>
<div id=”sidebar”>右サイドバー</div>
</div>
【CSS】
#warrper {
width: 100%;
display: table;
}
#l_navi, #content, #sidebar {
display: table-cell;
}
#l_navi {
width: 200px;
background-color: #ff0000;
}
#content {
background-color: #ffffff;
}
#r_side {
width: 200px;
background-color: #009900;
}
CSSソースの長さ自体は大して変わりませんが、非常にシンプルな記述になります。
floatを使っている場合に必要だったclearも不要です。
いままではfloatを使って行っていたカラムレイアウトが、このdisplay: table-cellを
使うことによって、よりシンプルに表現できます。
その他、display: table-cellは文字通りtableですので、
カラム内での縦方向の位置vertical-alignも思った通りに作用してくれます。
しかし、残念なのはこのdisplay:table-cell、IE8からしか対応していません。
FirefoxやSafariなど、IE以外の主要なブラウザはこのdisplay: table-cellに
ちゃんと対応しているのですが、現在でもIE6を使っているユーザーが大半なので・・・惜しいですね。
パソコンスクールISA渋谷校/INOUE
