ページネーションを賢くセンタリング

ページネーションとは

写真のギャラリー、複数ページに渡る記事、ページネーションはウェブサイトにおける標準的なナビゲーションの1つ。
非常に一般的であり、便利なナビゲーションであるが故、ユーザビリティは忘れられがちでもある。

1. クリッカブルエリアを大きく
2. アンダーラインは不要
3. カレントページの明示
4. リンクとリンクのスペースをとる
5. 次へと前へのリンクを設ける
6. 最初のページと最後のページへのリンクを設ける(可能であれば)
7. 最初のページと最後のページへのリンクは外側に設ける

Pagination 101 – KuraFire Network

このガイドラインに沿って、ページネーションの設計を行うことが好ましいだろう。

コーディングテクニック

一般的で、標準的であるが、なかなかコーディングのベストプラクティスが見つからない。
先ほどのガイドラインに沿うと、リンクをブロックにし、リンクエリアを大きくする必要があり、そうなるとfloatを利用することになる。
しかし、floatさせた要素をセンタリングするためには、そのセンタリングする要素の幅を知る必要があるだろう。

上図であげたDiggやFlickrのように最大表示件数が確定できる場合は、比較的簡単にコーディングできるが、
そうでない場合もある。例えば、サイト全体を動的に生成できない場合がそうだ。
そのような場面でも、もちろん最大表示件数が確定できるような場面でも使えるコーディングテクニックを紹介しよう。

HTML

 <ul>
<li><a href="#">‹ 前へ</a></li>
<li><a href="#">1</a></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="#">次へ ›</a></li>
</ul>

HTMLはシンプルにliを使って。

CSS

ul {
	margin: 20px;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
li {
	display: inline-block;
	*display: inline
	margin: 0;
	padding: 0;
}
li a {
	text-decoration: none;
	color: #555;
	padding: 4px 6px;
	border: 1px solid #ccc;
	margin: 0 4px;
	*zoom: 1;
}
li a:hover {
	border: 1px solid #999;
	color: #333;
	background-color: #f2f2f2;
}
 

liに指定したdisplay: inline-blockは、IE8、FF3以上、safari3以上なら問題なく利用できる、inlineでありながらblockにできるという、
便利なdisplayのプロパティ。inlineなので、liはfloatをしなくとも、通常の文字列と同じように横に並び、かつtext-alignでセンタリングすることが可能。

残念な事にIE6、7ではdisplay:inline-blockは使えない。
そこで今回は、IE6、IE7のために、スターハックを利用し(ハックは使わずコンディショナルコメントを利用することをおすすめする)、liをdisplay: inlineとし、通常であればinlineの要素であるaタグに*zoom:1を利用してIEの不思議に隠されたhasLayoutプロパティをtrueにすることで、同じ表現ができる。

inline-blockは非常に便利なプロパティなので、ページネーション以外にも使う場面は多いだろう。