【CSS】ページ送りナビゲーションには display:inline-block が超便利

HTML&CSS

ishida

2009.09.10

イメージ

こんばんは、ishidaです。

CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。

まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。

ページ送りのサンプル

XHTML のサンプルは以下です。とてもシンプルです。

<ul class="pager">
<li><strong>1</strong></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">次へ&gt;</a></li>
</ul>

CSS のコードは以下です。

ul.pager {
	margin: 0;
	padding: 0;
	font: 100% Arial, Helvetica, sans-serif;
	text-align: center;
}
ul.pager li {
	list-style: none;
	display: inline;
	margin: 0;
	padding: 0;
}
ul.pager li strong {
	display: -moz-inline-box; /* firefox2 対応 */
	display: inline-block;
	padding: 0.25em 0.4em;
	background-color: #EEEEEE;
	border: 1px #CCCCCC solid;
}
ul.pager li a {
	display: -moz-inline-box; /* firefox2 対応 */
	display: inline-block;
	padding: 0.25em 0.4em;
	border: 1px #CCCCCC solid;
}

ul.pager li a:link,
ul.pager li a:visited {
	border-color: #CCCCCC;
	color: #0033FF;
}
ul.pager li a:hover,
ul.pager li a:active {
	border-color: #003399;
	background-color: #003399;
	color: #FFFFFF;
}

最近のモダンブラウザは display: inline-block に対応していますが、FireFox2 以前は未対応です。
そのため inline-block の代わりに -moz-inline-box を使います。

またIE6～7についても inline-block ダメです。ですが、 inline-block に似たような処理（display が inline。hasLayout が true。）がされますので、特にハックすることもなく正常に表示されます。

右寄せ、左寄せ、中央寄せも親要素（ここでは ul.pager ）の text-align プロパティを変更するだけで、簡単に実現できます。

inline-block は他にもうまく使えば、応用できそうなのでひらめいたらまたこのブログにてご紹介します。

追記
以下のブラウザにて表示確認はしています。