バシャログ。

ページ送りのサンプル

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 次へ>

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 は他にもうまく使えば、応用できそうなのでひらめいたらまたこのブログにてご紹介します。

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

• IE 5.5 ～ 8
• Firefox 2.0 ～3.5
• Goole Chrome 2
• Safari 3 ～ 4
• Oprea 9.5