ページネーション考察 | warikiruのアレクサで日本語サイト上位20社くらいのページネーション考察を見て、「マークアップはどうなんだろう？」と思ったので調べてみました。
※今回は上記記事から数件、その他メジャーなポータルサイト等からピックアップしました。
※href、onclickなどの属性値についてはすべて省略しています。
HTML:
-
-
-
-
-
</big>
-
<a href="#" title="結果 1 - 100">1
</a>
-
-
<a href="#" title="結果 201 - 300">3
</a>
-
<a href="#" title="結果 301 - 400">4
</a>
-
<a href="#" title="結果 401 - 500">5
</a>
-
<a href="#" title="結果 501 - 600">6
</a>
-
<a href="#" title="結果 601 - 700">7
</a>
-
-
-
</big>
-
</p>
HTML:
-
<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse; text-align: center; direction: ltr;" align="center">
-
-
-
-
<a href="#"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span>
-
<div style="margin-right: 8px;">
-
-
</div>
-
</a>
-
</td>
-
<td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1
</a></td>
-
<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>2
</td>
-
<td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>3
</a></td>
-
<td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>4
</a></td>
-
<td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>5
</a></td>
-
<td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>6
</a></td>
-
<td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>7
</a></td>
-
<td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>8
</a></td>
-
<td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>9
</a></td>
-
<td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>10
</a></td>
-
<td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>11
</a></td>
-
<td class="b"><a href="#"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span><b>次へ
</b></a></td>
-
</tr>
-
</tbody>
-
</table>
HTML:
-
-
<span class="pagerarrow"><a href="#"><img src="/img/cmn/pager_arrow_before.gif" alt="前へ" width="12" height="23"/></a></span>
-
<span class="num"><a href="#">1
</a></span>
-
<span class="selected">2
</span>
-
<span class="num"><a href="#">3
</a></span>
-
<span class="num"><a href="#">4
</a></span>
-
<span class="num"><a href="#">5
</a></span>
-
<span class="num"><a href="#">6
</a></span>
-
<span class="num"><a href="#">7
</a></span>
-
<span class="num"><a href="#">8
</a></span>
-
<span class="num"><a href="#">9
</a></span>
-
<span class="num"><a href="#">10
</a></span>
-
<span class="pagerarrow"><a href="#"><img src="/img/cmn/pager_arrow_after.gif" alt="次へ" width="12" height="23"/></a></span>
-
</p>
HTML:
-
<div class="pagn" id="pagn">
-
<span class="pagnDisabled">戻る
</span>
-
<span class="pagnSep">|
</span>
-
<span class="pagnLead">ページ:
</span>
-
<span class="pagnCur">1
</span>
-
<span class="pagnLink"><a href="#">2
</a></span>
-
<span class="pagnLink"><a href="#">3
</a></span>
-
<span class="pagnMore">...
</span>
-
<span class="pagnSep">|
</span>
-
<span class="pagnNext"><a href="#" class="pagnNext" id="pagnNextLink" title="次のページ">次へ
</a></span>
-
</div>
HTML:
-
<div class="pager pager-autopagerize">
-
<span><img title="ページ自動ロードを有効にする" alt="自動ロード無効" class="pointer" src="/images/auto_pagerize.gif" width="16" height="16"/></span>
-
<a class="pager-prev" href="#"><前の20件
</a>
-
-
-
-
<a class="pager-next" href="#">>次の20件
</a>
-
</div>
HTML:
-
-
-
<a href="#" class="Prev"><Prev
</a>
-
-
<span class="this-page">2
</span>
-
-
-
-
-
-
-
-
-
-
<a href="#" class="Next">Next
></a>
-
</div>
-
</div>
HTML:
-
-
<li><a class="sb_pagP" href="#" onmousedown="#">前へ
</a></li>
-
<li><a href="#" onmousedown="#">1
</a></li>
-
<li><a class="sb_pagS">2
</a></li>
-
<li><a href="#" onmousedown="#">3
</a></li>
-
<li><a href="#" onmousedown="#">4
</a></li>
-
<li><a href="#" onmousedown="#">5
</a></li>
-
<li><a href="#" onmousedown="#">6
</a></li>
-
<li><a class="sb_pagN" href="#" onmousedown="#">次へ
</a></li>
-
</ul>
HTML:
-
-
<span class="pagerLabel smallText label">ページ:
</span>
-
<a href="#" class="pagerNotCurrent">前へ
</a>
-
<a href="#" class="pagerNotCurrent">1
</a>
-
<span class="pagerCurrent">2
</span>
-
<a href="#" class="pagerNotCurrent">3
</a>
-
<a href="#" class="pagerNotCurrent">4
</a>
-
<a href="#" class="pagerNotCurrent">5
</a>
-
<a href="#" class="pagerNotCurrent">次へ
</a>
-
</div>
ぐるなび
HTML:
-
-
-
<a onclick='' href="#">1
</a>
-
-
|
<a onclick='#' href="#">3
</a>
-
|
<a onclick='#' href="#">4
</a>
-
|
<a onclick='#' href="#">5
</a>
-
|
<a onclick='#' href="#">6
</a>
-
|
<a onclick='#' href="#">7
</a>
-
|
<a onclick='#' href="#">8
</a>
-
|
<a onclick='#' href="#">9
</a>
-
|
<a onclick='#' href="#">10
</a>
-
| …
-
</p>
-
-
<a onclick='#' href="#">最初を表示
</a>
-
|
<a onclick='#' href="#">前を表示
</a>
-
|
<a onclick='#' href="#">次を表示
</a>
-
|
<a onclick='#' href="#">最後を表示
</a>
-
</p>
-
</div>
おおよそ想像の通りなのですが、大きくふたつのパターンが見られるようです。
- リスト（
ul,liでマークアップし、CSSで横並びにする
divやpで包括し、aで並べる
ナビゲーションとなると多くの場合はリスト要素としてマークアップされることが多いように思いますが、ページネーションはこのようにどちらが多いというわではないようです。
実際どちらが正しいというものでも無いでしょうね。
意味を考えてマークアップはおこないたいですが、この場合はそのページネーションの仕様によって好ましい方を選ぶのが良いかと思います。
よりアクセシブルなのはどちらか？という観点で考えるとまた違ったより好ましいHTML/CSS上の設計があるかもしれませんね。
マークアップという点を除いて、機能上秀逸だと思ったのは、
はてなのページ自動ロード機能です。
クライアント側（ブラウザ側）で次ページを自動で読み込むような機能を持たせるのではなく、サービス側で実装されているのは良いですね。
なおかつ強制ではなくスイッチでオンオフできるのがなお素晴らしいと感じます。
結論としては、単純にページネーションとしてどれが「意味的に」ベストのマークアップかというのは無いですが、仕様に応じて適切なものを選択すれば良いかと思います。
マークアップよりも、ナビゲーションとしての機能がユーザーに優しいものであるかどうか見直してみたいですね。
関連した記事：
ページの先頭に戻る
コメントを投稿