GitHubに移動

ページネーション

複数のページにまたがって関連するコンテンツのシリーズがあることを示すページネーションを表示するためのドキュメントと例。

概要

ページネーションには、接続されたリンクの大きなブロックを使用し、リンクを見逃しにくく、簡単に拡張できるようにして、大きなヒット領域を提供しています。ページネーションはリスト HTML 要素で構築されているため、スクリーンリーダーは使用可能なリンクの数をアナウンスできます。ラッピング<nav>要素を使用して、ナビゲーションセクションとしてスクリーンリーダーおよびその他の支援技術に識別できるようにします。

さらに、ページにそのようなナビゲーションセクションが1つ以上ある可能性があるため、<nav>に目的を反映する記述的なaria-labelを提供することをお勧めします。たとえば、ページネーションコンポーネントを使用して検索結果のセット間を移動する場合、適切なラベルはaria-label="検索結果ページ"です。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

アイコンを使用する

一部のページネーションリンクにテキストの代わりにアイコンまたはシンボルを使用しようとしていますか? aria属性を使用して適切なスクリーンリーダーサポートを提供してください。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

無効化とアクティブの状態

ページネーションリンクは、さまざまな状況に合わせてカスタマイズできます。クリックできないように見えるリンクには.disabledを使用し、現在のページを示すには.activeを使用します。

.disabledクラスはpointer-events: noneを使用して<a>のリンク機能を無効化しようとしますが、そのCSSプロパティはまだ標準化されておらず、キーボードナビゲーションを考慮していません。そのため、無効なリンクには常にtabindex="-1"を追加し、カスタムJavaScriptを使用して機能を完全に無効にする必要があります。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

オプションで、アクティブまたは無効なアンカーを<span>に差し替えたり、前の/次の矢印の場合はアンカーを省略して、クリック機能を削除し、意図したスタイルを保持しながらキーボードフォーカスを回避できます。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">2</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

サイズ変更

より大きくまたは小さくページネーションが必要ですか? 他のサイズには.pagination-lgまたは.pagination-smを追加します。

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

調整

フレックスボックスユーティリティを使用して、ページネーションコンポーネントの配置を変更します。

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>