Design Pattern

ページネーション

ページネーションは、コンテンツを複数ページに分割し、前後移動や直接移動を可能にするナビゲーションです。nav とリスト構造を使い、aria-current で現在位置を明示するのが基本です。

難易度: 初級カテゴリ: ナビゲーション

いつ使う / 使わない

使うべきとき

検索結果や記事一覧など、多数の項目を複数ページに分割して表示する場合
ユーザーが特定のページへ直接ジャンプしたい場合
1 ページにすべて載せるとパフォーマンスや一覧性が下がる場合

使わないべきとき

項目数が少なく 1 ページに収まる場合
無限スクロールの方が文脈に合う場合
ページ分割すると読書体験や比較が阻害される場合

構造（Anatomy）

1 ナビゲーションコンテナ（nav 要素）

2 前へ / 次へボタン

3 ページ番号リンク

4 現在のページ（aria-current で明示）

5 省略記号（大量ページ時の省略表示）

nav — ページネーション全体を囲むランドマーク。aria-label で用途を説明する
前へ / 次へ — 直前 / 直後のページへ移動する導線
ページ番号 — 個別のページへ直接移動するリンク
現在のページ — aria-current="page" で現在地を示す
省略記号 — 大量ページ時の中間省略を示す装飾要素

HTML 構造

重要なポイント

<nav> と aria-label でページネーションの目的を明示する
リンク群は <ul> / <li> で構造化する
現在のページには aria-current="page" を付与する
前後リンクやアイコンボタンには意味が分かるラベルを付ける

CSS 実装

スタイル設計のポイント

Flexbox と gap で均一な間隔に整える
現在のページは背景色、太字、ボーダーなどではっきり区別する
min-width と高さを揃えて、桁数が違っても押しやすさを保つ
:focus-visible でキーボードフォーカスを明示する

キーボード操作

Tab で前へ / 次へ、各ページリンクにフォーカス移動
Enter でページ遷移
現在のページはスクリーンリーダーに追加情報付きで通知される

ライブデモ

基本ページネーション

前へ / 次へと番号リンクを備えた標準的な構成です。

省略記号付き

ページ数が多い場合に中間を省略するパターンです。

コンパクト

モバイル向けに情報量を絞ったバリエーションです。

よくある間違い

nav ランドマークがない

div だけで囲うと、ページ内ナビゲーションとして見つけにくくなります。

aria-current がない

現在のページが支援技術に伝わらず、視覚情報に依存した UI になります。

リンクの意味が曖昧

前へ / 次へやアイコンだけのボタンには、分かるラベルが必要です。

無効状態を消してしまう

最初や最後のページでボタンを消すより、無効状態として見せた方が構造が安定します。