UI Component Lab English

← コンポーネント一覧

ナビゲーション

Pagination ページネーション

検索結果など長い一覧を複数のページに分け、ページ間を移動するための部品。

全40件中 1〜10件を表示

別名

見分けるポイント

ページ番号が横に並び、両端に「前へ」「次へ」がある。今のページ番号は強調され、ページ数が多いときは「…」で省略される。

バリエーション

表のページ送り
データの表の下に付け、1ページの行数や表示中の範囲も表示するもの。

挙動

  • 番号を選ぶとそのページを表示し、「前へ」「次へ」で1ページずつ移動する。
  • 今のページは aria-current="page" で示し、全体を nav ランドマークで囲む。
  • Web サイトではページごとの URL へのリンクにすることが多い。このデモは同じ画面の中身を入れ替えるため、ボタンにしている。

キーボード操作

キー動作
Tabページ番号や「前へ」「次へ」の間を移動する。
Enterフォーカス中のページへ移動する。

使い分け・注意点

  • デジタル庁デザインシステムでは、最初と最後のページで「前へ」「次へ」を無効にせず非表示にする。このデモは aria-disabled にして、フォーカスできるまま残している。
  • カルーセル: ページネーションは長い一覧のページを移動し、カルーセルは少数のスライドをその場で1枚ずつ見せる。
  • ステップナビゲーション: ページネーションは検索結果などのページを行き来し、ステップナビゲーションは内容の異なる手順の中での現在地を示す。

出典