CSS辞書
UIレシピ集に戻る

ページネーション

ナビゲーションBaseline 広く利用可能

記事一覧の下に置くページ送りナビ。現在ページはaria-current="page"で示し、タップしやすい36px四方のリンクをgapで等間隔に並べます。

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

HTML
CSS

仕組みの解説

ページ番号の並びは ul/li でマークアップし、nav の aria-label で「ページ送り」であることを伝えます。現在ページの見た目は専用クラスではなく aria-current="page" 属性セレクタで当てるのがポイントで、スタイルとアクセシビリティ情報が常に一致します。各リンクは display: grid + place-items: center で数字を中央に置き、min-widthと高さ36pxでタップしやすい大きさを確保しています。

実装のポイント

省略(…)はリンクにせずaria-hiddenにします。前へ・次へは記号だけなのでaria-labelを忘れずに。

AIに依頼するときの文例

ページネーションを作ってください。ul/liとnav[aria-label]でマークアップし、現在ページはaria-current="page"属性セレクタでスタイリング、各リンクは36px四方以上でタップしやすくしてください。

使っているプロパティ