CSS「display: table」と「display: table-cell」で出来ること

• 2008年4月24日 14:11
• (X)HTMLCSS

Tweet

IE8は「display: table-cell」に対応

「display: table-cell」とは、テーブルの構造を表現することができるCSSプロパティです。先日公開されたベータ版(IE8 Beta1)で確認しましたが、IE8からは「display: table-cell」に対応しているようです。

そこで、今回はこの「display: table-cell」を使うことで、どんなことが出来るのかを見ていきたいと思います。

「float」と「display: table-cell」でのカラムレイアウトを比較

左右のカラムが固定で、中央のカラムが可変というような3カラムのレイアウトを表現したい場合、CSSでは通常「float」を使います。カラムレイアウトは「display: table-cell」でも表現できますので、この2つの方法を比較してみたいと思います。

「float」を使った従来の3カラムレイアウト

「float」で3カラムレイアウトを表現する場合、下記のようなHTMLとCSSになります。

HTML

<div id="body">
	<div id="navigation">navigation</div>
	<div id="content">
		<div id="content-inner">content</div>
	</div>
	<div id="sidebar">sidebar</div>
</div>

CSS

#navigation {
	float: left;
	width: 200px;
	margin-right: -200px;
	background-color: #FFCC66;
}

#content {
	float: left;
	width: 100%;
}

#content-inner {
	margin: 0 200px;
	background-color: #CC6633;
}

#sidebar{
	float: left;
	width: 200px;
	margin-left: -200px;
	background-color: #FF9966;
}

• サンプル：「float」を使った3カラムレイアウト

ネガティブマージン(マイナスマージン)を使ったり、真ん中のカラムをdiv要素で余分に囲ってやらなければと、結構複雑な記述になります。floatを使っているので、clearもしないといけません。

「display: table-cell」を使ったシンプルな3カラムレイアウト

「display: table-cell」で3カラムレイアウトを表現する場合、下記のようなHTMLとCSSになります。

HTML

<div id="body">
	<div id="navigation">navigation</div>
	<div id="content">content</div>
	<div id="sidebar">sidebar</div>
</div>

CSS

#body {
	width: 100%;
	display: table;
}

#navigation, #content, #sidebar {
	display: table-cell;
}

#navigation {
	width: 200px;
	background-color: #FFCC66;
}

#content {
	background-color: #CC6633;
}

#sidebar {
	width: 200px;
	background-color: #FF9966;
}

• サンプル：「display: table-cell」を使った3カラムレイアウト
  ※IE8 Beta、Firefox2、Safari2、Opera9などで見てください

CSSソースの長さ自体は大して変わりませんが、パッと見でなにをしているかわかるぐらい非常にシンプルな記述になります。floatを使っている場合に必要だったclearもいりません。

いままではfloatを使って行っていたカラムレイアウトが、この「display: table-cell」を使うことによって、よりスマートに表現できるのです。

「display: table-cell」で縦方向に対する高さを揃える

「display: table-cell」には、もうひとつ利点があります。「display: table-cell」は、文字通り「table」ですので、CSSでは再現しにくい、縦方向に対する高さを揃えることが出来ます。そして「table」ですので、カラム内での縦方向の位置「vertical-align」も思った通りに作用してくれます。

• サンプル：「display: table-cell」で縦方向に対する高さを揃える
  ※IE8 Beta、Firefox2、Safari2、Opera9などで見てください

3カラムの高さがバラバラに設定してありますが、最大の100pxに揃っています。そして、カラム内での縦方向の位置も表現できています。

「display: table-cell」が使えるのは数年後？

「display: table-cell」を使うことで、CSSで出来る表現が広がります。table要素で記述した方が良い部分まで「display: table-cell」で記述する必要はありませんが、カラムレイアウトの表現に活躍してくれそうです。

しかし、惜しむらくはIE8からしか対応していないということです。2008年4月現在でさえIE6を使っている方が大勢いることを考えると、この「display: table-cell」が活躍するのはだいぶ先の話になりそうです。

Firefox2やSafari2など、IE以外の主要なブラウザがこの「display: table-cell」にちゃんと対応していることを考えると、ホント「Fuck IE！」と叫びたくなります。

余談：「display: table-cell」でこんな事も出来ました

「display: table-cell」を色々いじっていたら、こんな事も出来ました。なんか不思議な感じですが「display: table-cell」以外でも表現できるのでしょうか。

• サンプル：「display: table-cell」でこんな事も出来ました
  (※IE8 Beta、Firefox2、Safari2、Opera9等で見てください)

Tweet