【CSS】display:tableを使ったナビゲーション

『CSSの小技』第2回の今回はdisplay:tableを使ったナビゲーションの構築です。
今までは古いIEに対応させるべく、「float」で浮かべて、「clearfix」で落とす。とか
display: inline-blockを利用して横並びのナビゲーションを作っていました。
XPのサポート終了により古いIEに対応させる必要が薄くなってきましたので、横並びさせるのに便利な手法としてIE8以降で使用可能なdisplay:tableを今後使っていきたいと思います。
そして、今までIEに苦しめられていた分の工数を、新しい表現にあてることが出来ればより良いWebサイト制作が出来るのではないかなぁと個人的には思います。

display:tableとは

tableと聞いてtableレイアウトを思い浮かべたり、その昔tableだらけでWebサイト制作をしていた頃を思い出したりする人もいるでしょう。それで大体合ってます！
display: tableとは、指定した要素をtableタグとして扱い、その子要素にdisplay:table-cellを指定することによってtdタグと同様の表示をさせる事ができるようになります。

display: tableのメリット

1.vertical-align:middleで縦中央揃えが出来る

ナビゲーションの縦幅に対して文字を中央に配置したい場合、line-hightを用いたり、単純にmargin-topやpadding-topを利用したりしていましたが、
項目名が1行のもの、2行のものが混在すると一気にレイアウトしにくくなっていました。
display:tableであればvertical-align:middleによってこの問題が一気に解決します。

2.ナビゲーションボタンの大きさを均等にする

display:tableでは親要素にtable-layout:fixedとwidthを指定してあげる事により均等幅のナビゲーションボタンを設置することが可能です。
レスポンシブデザイン用途では均等幅の状態でウィンドウ幅に合わせた伸縮を行えます。

3.ナビゲーションボタンの段落ちがない

「firefoxでは大丈夫なのに、IEで段落ちしてしまう」といったことを経験したことは無いでしょうか？tableレイアウトでは一番高い要素に合わせて高さが統一され、横幅もはみ出ないように調整されます。ですのでdisplay:tableでは段落ちしてしまうことはありません。こちらもレスポンシブデザインでは有効でしょう。

使用方法

使い方はとても簡単です。親要素（ul等）にdisplay:tableを指定し、子要素（li等）にdisplay:table-cellを指定してあげるだけです。

HTML

<ul>
	<li><a href="#">HOME<span>ホーム</span></a></li>
	<li><a href="#">SERVICE<span>サービス</span></a></li>
	<li><a href="#">ABOUT US<span>企業概要</span></a></li>
	<li><a href="#">SHOP LIST<span>取扱店舗一覧</span></a></li>
	<li><a href="#">CONTACT US<span>お問い合わせ</span></a></li>
</ul>

CSS

ul {
	display: table;
	margin: 0 auto;
	width: 900px;
	text-align: center;

}

ul li {
	display: table-cell;
	vertical-align: middle;
	font-size: 14px;
}

/* ここからは主にナビゲーションの装飾 */
ul li a {
	display: block;
	padding: 2em 0;
	color: #FFFFFF;
	text-decoration: none;
}

ul li a:hover {
	background: #CCCCCC;
	color: #000000;
	text-decoration: underline;
}

ul li a span {
	display: block;
	font-size: 11px;
}

ul li:first-child {
	background: #999999;
}

ul li:nth-child(2) {
	background: #777777;
}

ul li:nth-child(3) {
	background: #555555;
}

ul li:nth-child(4) {
	background: #333333;
}

ul li:nth-child(5) {
	background: #111111;
}

アレンジ1　等幅ボタン

上記ナビゲーションでは文字数によってボタンの横幅が違います。table-layout:fixedを使ってボタンの横幅を同じにします。

HTML

<ul>
	<li><a href="#">HOME<span>ホーム</span></a></li>
	<li><a href="#">SERVICE<span>サービス</span></a></li>
	<li><a href="#">ABOUT US<span>企業概要</span></a></li>
	<li><a href="#">SHOP LIST<span>取扱店舗一覧</span></a></li>
	<li><a href="#">CONTACT US<span>お問い合わせ</span></a></li>
</ul>

CSS

ul {
	display: table;
	table-layout:fixed; /* ←ここに追加するだけ */
	margin: 0 auto;
	width: 900px;
	text-align: center;

}

ul li {
	display: table-cell;
	vertical-align: middle;
	font-size: 14px;
}

/* ここからは主にナビゲーションの装飾 */
ul li a {
	display: block;
	padding: 2em 0;
	color: #FFFFFF;
	text-decoration: none;
}

ul li a:hover {
	background: #CCCCCC;
	color: #000000;
	text-decoration: underline;
}

ul li a span {
	display: block;
	font-size: 11px;
}

ul li:first-child {
	background: #999999;
}

ul li:nth-child(2) {
	background: #777777;
}

ul li:nth-child(3) {
	background: #555555;
}

ul li:nth-child(4) {
	background: #333333;
}

ul li:nth-child(5) {
	background: #111111;
}

アレンジ2　等幅ボタン+レスポンシブデザイン

さらに横幅を「%」で指定することによりウィンドウ幅によって自動的に伸縮するレスポンシブデザイン用のナビゲーションに早変わりです。

HTML

<ul>
	<li><a href="#">HOME<span>ホーム</span></a></li>
	<li><a href="#">SERVICE<span>サービス</span></a></li>
	<li><a href="#">ABOUT US<span>企業概要</span></a></li>
	<li><a href="#">SHOP LIST<span>取扱店舗一覧</span></a></li>
	<li><a href="#">CONTACT US<span>お問い合わせ</span></a></li>
</ul>

CSS

ul {
	display: table;
	table-layout:fixed; /* ←等幅ボタン */
	margin: 0 auto;
	width: 90%; /* ←%で指定 両サイドに5%ずつの余白 */
	text-align: center;

}

ul li {
	display: table-cell;
	vertical-align: middle;
	font-size: 14px;
}

/* ここからは主にナビゲーションの装飾 */
ul li a {
	display: block;
	padding: 2em 0;
	color: #FFFFFF;
	text-decoration: none;
}

ul li a:hover {
	background: #CCCCCC;
	color: #000000;
	text-decoration: underline;
}

ul li a span {
	display: block;
	font-size: 11px;
}

ul li:first-child {
	background: #999999;
}

ul li:nth-child(2) {
	background: #777777;
}

ul li:nth-child(3) {
	background: #555555;
}

ul li:nth-child(4) {
	background: #333333;
}

ul li:nth-child(5) {
	background: #111111;
}