ページ切り替え

この料理帳のパターンは、ページ切り替え (pagination) を表示するために使用されるナビゲーションのパターンを示し、ユーザーは検索結果などのコンテンツのページ間を移動できます。

ページ切り替えリスト内のページのセットへのリンク

要件

スクリーンリーダーを使用している人がページ切り替えであることを理解できるようにするために、項目を <nav> 要素内のリストとしてマークアップし、CSS を使用してレイアウトを視覚的に 1 行で表示します。

通常、ページ切り替えのコンポーネントはコンテンツの下側にあり、水平方向の中央に配置されます。

レシピ

以下のコードブロックの "Play" をクリックすると、この例を MDN Playground で開きます。

html

<nav aria-label="pagination">
  <ul class="pagination">
    <li>
      <a href="">
        <span aria-hidden="true">&laquo;</span>
        <span class="visuallyhidden">前のページ</span>
      </a>
    </li>
    <li>
      <a href=""><span class="visuallyhidden">ページ </span>1</a>
    </li>
    <li>
      <a href="" aria-current="page">
        <span class="visuallyhidden">ページ </span>2
      </a>
    </li>
    <li>
      <a href=""> <span class="visuallyhidden">ページ </span>3 </a>
    </li>
    <li>
      <a href=""> <span class="visuallyhidden">ページ </span>4 </a>
    </li>
    <li>
      <a href="">
        <span class="visuallyhidden">後のページ</span
        ><span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

css

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

nav {
  border-top: 1px solid #eeeeee;
  margin-top: 1em;
  padding-top: 0.5em;
  font: 1.2em sans-serif;

  display: flex;
  justify-content: center;
}

.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.pagination li {
  margin: 0 1px;
}

.pagination a {
  display: block;
  padding: 0.5em 1em;
  border: 1px solid #999999;
  border-radius: 0.2em;
  text-decoration: none;
}

.pagination a[aria-current="page"] {
  background-color: #333333;
  color: white;
}

選択したもの

このパターンは、フレックスボックスを使用してレイアウトされています — 一方のフレックスコンテナーは別のフレックスコンテナーの中にネストされています。 <nav> 要素は、justify-content プロパティを使用してリストを中央に配置できるように、フレックスコンテナーとして指定されています。

リストそのものもフレックスコンテナーとなって、アイテムを一列に並べます。アイテムの空間を空けるには、フレックスアイテムに margin を使用するか、フレックスコンテナーに gap を追加するかしてください。

css

.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}

アクセシビリティの考慮

スクリーンリーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにしたいです。これを手助けするために、 aria-label="pagination" を <nav> 要素に追加しました。

スクリーンリーダーによって読み取られるが視覚的に隠されている追加のコンテンツを追加し、ページング矢印に aria-hidden 属性を設定しました。

このドキュメントの最後にある「関連情報」の節には、関連するアクセシビリティのトピックへのリンクがあります。

Help improve MDN

Learn how to contribute

This page was last modified on 2026年4月29日 by MDN contributors.

View this page on GitHub • Report a problem with this content