EC studio EC studio デザインブログ

2009年06月10日投稿者:谷 拓樹

ページネーションのマークアップ考察

ページネーション考察 | warikiruのアレクサで日本語サイト上位20社くらいのページネーション考察を見て、「マークアップはどうなんだろう?」と思ったので調べてみました。
※今回は上記記事から数件、その他メジャーなポータルサイト等からピックアップしました。
※href、onclickなどの属性値についてはすべて省略しています。

Yahoo! ウェブ検索

HTML:
  1.  <br />
  2.  <big id="yschprvb">
  3.   <a href="#"><span>&lt;</span><b>前へ</b></a>
  4.  </big>
  5.  <a href="#" title="結果 1 - 100">1</a>
  6.  <span>2</span>
  7.  <a href="#" title="結果 201 - 300">3</a>
  8.  <a href="#" title="結果 301 - 400">4</a>
  9.  <a href="#" title="結果 401 - 500">5</a>
  10.  <a href="#" title="結果 501 - 600">6</a>
  11.  <a href="#" title="結果 601 - 700">7</a>
  12.  <big id="yschnxtb">
  13.   <a href="#"><b>次へ</b><span>&gt;</span></a>
  14.  </big>
  15. </p>

google.co.jp ウェブ検索

HTML:
  1. <table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse; text-align: center; direction: ltr;" align="center">
  2.   <tr valign="top">
  3.    <td class="b">
  4.     <a href="#"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span>
  5.      <div style="margin-right: 8px;">
  6.       <b>前へ</b>
  7.      </div>
  8.     </a>
  9.    </td>
  10.    <td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>
  11.    <td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>2</td>
  12.    <td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>3</a></td>
  13.    <td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>4</a></td>
  14.    <td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>5</a></td>
  15.    <td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>6</a></td>
  16.    <td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>7</a></td>
  17.    <td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>8</a></td>
  18.    <td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>9</a></td>
  19.    <td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>10</a></td>
  20.    <td><a href="#"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>11</a></td>
  21.    <td class="b"><a href="#"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span><b>次へ</b></a></td>
  22.   </tr>
  23.  </tbody>
  24. </table>

mixi(ミクシィ) 検索

HTML:
  1.  [
  2.   <li><a href="#">1</a></li>
  3.   <li class="on">2</li>
  4.   <li><a href="#">3</a></li>
  5.   <li><a href="#">4</a></li>
  6.   <li><a href="#">5</a></li>
  7.   <li><a href="#">6</a></li>
  8.   <li><a href="#">7</a></li>
  9.   <li><a href="#">8</a></li>
  10.   <li><a href="#">9</a></li>
  11.   <li><a href="#">10</a></li>
  12.   <li><a href="#">11</a></li>
  13.   <li><a href="#">12</a></li>
  14.   <li><a href="#">13</a></li>
  15.   <li><a href="#">14</a></li>
  16.   <li><a href="#">15</a></li>
  17.   <li><a href="#">16</a></li>
  18.   <li><a href="#">17</a></li>
  19.   <li><a href="#">18</a></li>
  20.   <li><a href="#">19</a></li>
  21.   <li><a href="#">20</a></li>
  22.  </ul>]
  23. </div>

livedoor ウェブ検索

HTML:
  1. <p class="pager">
  2.  <span class="pagerarrow"><a href="#"><img src="/img/cmn/pager_arrow_before.gif" alt="前へ" width="12" height="23"/></a></span>
  3.   &nbsp;<span class="num"><a href="#">1</a></span>
  4.   &nbsp;<span class="selected">2</span>
  5.   &nbsp;<span class="num"><a href="#">3</a></span>
  6.   &nbsp;<span class="num"><a href="#">4</a></span>
  7.   &nbsp;<span class="num"><a href="#">5</a></span>
  8.   &nbsp;<span class="num"><a href="#">6</a></span>
  9.   &nbsp;<span class="num"><a href="#">7</a></span>
  10.   &nbsp;<span class="num"><a href="#">8</a></span>
  11.   &nbsp;<span class="num"><a href="#">9</a></span>
  12.   &nbsp;<span class="num"><a href="#">10</a></span>
  13.  <span class="pagerarrow"><a href="#"><img src="/img/cmn/pager_arrow_after.gif" alt="次へ" width="12" height="23"/></a></span>
  14. </p>

Amazon.co.jp

HTML:
  1. <div class="pagn" id="pagn">
  2.  <span class="pagnDisabled">戻る</span>
  3.  <span class="pagnSep">|</span>
  4.  <span class="pagnLead">ページ:</span>
  5.  <span class="pagnCur">1</span>
  6.  <span class="pagnLink"><a href="#">2</a></span>
  7.  <span class="pagnLink"><a href="#">3</a></span>
  8.  <span class="pagnMore">...</span>
  9.  <span class="pagnSep">|</span>
  10.  <span class="pagnNext"><a href="#" class="pagnNext" id="pagnNextLink" title="次のページ">次へ</a></span>
  11. </div>

はてなブックマーク

HTML:
  1. <div class="pager pager-autopagerize">
  2.  <span><img title="ページ自動ロードを有効にする" alt="自動ロード無効" class="pointer" src="/images/auto_pagerize.gif" width="16" height="16"/></span>
  3.  <a class="pager-prev" href="#">&lt;前の20件</a>
  4.  <a href="#">1</a>
  5.  <strong>2</strong>
  6.  <a href="#">3</a>
  7.  <a class="pager-next" href="#">&gt;次の20件</a>
  8. </div>

Flickr

HTML:
  1. <div class="Pages">
  2.  <div class="Paginator">
  3.   <a href="#" class="Prev">&lt;Prev</a>
  4.   <a href="#">1</a>
  5.   <span class="this-page">2</span>
  6.   <a href="#">3</a>
  7.   <a href="#">4</a>
  8.   <a href="#">5</a>
  9.   <a href="#">6</a>
  10.   <a href="#">7</a>
  11.   <a href="#">8</a>
  12.   <a href="#">9</a>
  13.   <a href="#">10</a>
  14.   <a href="#">11</a>
  15.   <a href="#" class="Next">Next&gt;</a>
  16.  </div>
  17. </div>

Bing

HTML:
  1.  <li><a class="sb_pagP" href="#" onmousedown="#">前へ</a></li>
  2.  <li><a href="#" onmousedown="#">1</a></li>
  3.  <li><a class="sb_pagS">2</a></li>
  4.  <li><a href="#" onmousedown="#">3</a></li>
  5.  <li><a href="#" onmousedown="#">4</a></li>
  6.  <li><a href="#" onmousedown="#">5</a></li>
  7.  <li><a href="#" onmousedown="#">6</a></li>
  8.  <li><a class="sb_pagN" href="#" onmousedown="#">次へ</a></li>
  9. </ul>

YouTube

HTML:
  1. <div class="pagingDiv">
  2.  <span class="pagerLabel smallText label">ページ: </span>
  3.  <a href="#" class="pagerNotCurrent">前へ</a>
  4.  <a href="#" class="pagerNotCurrent">1</a>
  5.  <span class="pagerCurrent">2</span>
  6.  <a href="#" class="pagerNotCurrent">3</a>
  7.  <a href="#" class="pagerNotCurrent">4</a>
  8.  <a href="#" class="pagerNotCurrent">5</a>
  9.  <a href="#" class="pagerNotCurrent">次へ</a>
  10. </div>

ぐるなび

HTML:
  1. <div class="nav">
  2.  <p>
  3.   <a onclick='' href="#">1</a>
  4.   | <strong>2</strong>
  5.   | <a onclick='#' href="#">3</a>
  6.   | <a onclick='#' href="#">4</a>
  7.   | <a onclick='#' href="#">5</a>
  8.   | <a onclick='#' href="#">6</a>
  9.   | <a onclick='#' href="#">7</a>
  10.   | <a onclick='#' href="#">8</a>
  11.   | <a onclick='#' href="#">9</a>
  12.   | <a onclick='#' href="#">10</a>
  13.   | …
  14.  </p>
  15.  <p class="pn">
  16.   <a onclick='#' href="#">最初を表示</a>
  17.   | <a onclick='#' href="#">前を表示</a>
  18.   | <a onclick='#' href="#">次を表示</a>
  19.   | <a onclick='#' href="#">最後を表示</a>
  20.  </p>
  21. </div>

おおよそ想像の通りなのですが、大きくふたつのパターンが見られるようです。

  • リスト(ul,liでマークアップし、CSSで横並びにする
  • divpで包括し、aで並べる

ナビゲーションとなると多くの場合はリスト要素としてマークアップされることが多いように思いますが、ページネーションはこのようにどちらが多いというわではないようです。
実際どちらが正しいというものでも無いでしょうね。

意味を考えてマークアップはおこないたいですが、この場合はそのページネーションの仕様によって好ましい方を選ぶのが良いかと思います。

よりアクセシブルなのはどちらか?という観点で考えるとまた違ったより好ましいHTML/CSS上の設計があるかもしれませんね。

マークアップという点を除いて、機能上秀逸だと思ったのは、
はてなのページ自動ロード機能です。
クライアント側(ブラウザ側)で次ページを自動で読み込むような機能を持たせるのではなく、サービス側で実装されているのは良いですね。
なおかつ強制ではなくスイッチでオンオフできるのがなお素晴らしいと感じます。

結論としては、単純にページネーションとしてどれが「意味的に」ベストのマークアップかというのは無いですが、仕様に応じて適切なものを選択すれば良いかと思います。
マークアップよりも、ナビゲーションとしての機能がユーザーに優しいものであるかどうか見直してみたいですね。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.