ページ送り

記事 ／ パターン集トップ

記事一覧の下に置く。現在ページを aria-current で示し、番号は押せる大きさに保つ

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<nav class="pagination" aria-label="ページ送り">
  <ul>
    <li><a href="?page=2" rel="prev">前へ</a></li>
    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li><a href="?page=3" aria-current="page">3</a></li>
    <li><a href="?page=4">4</a></li>
    <li class="pagination__gap"><span aria-hidden="true">…</span></li>
    <li><a href="?page=12">12</a></li>
    <li><a href="?page=4" rel="next">次へ</a></li>
  </ul>
</nav>

.pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pagination a:hover {
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}
.pagination a[aria-current="page"] {
  background: var(--color-accent-text);
  border-color: var(--color-accent-text);
  color: var(--color-on-accent);
}
.pagination__gap {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--color-text-muted);
}

確認する#

• 現在ページは aria-current="page" と塗りの両方で示している
• 1ページ目では「前へ」を消すか押せなくしている
• 番号1つが 2.75rem 四方の押せる大きさになっている

関連#

• ナビゲーション
• ARIA
• 出発点のCSS