番号付きページネーション
記事一覧や検索結果でおなじみの、前後の矢印・ページ番号・現在地・省略記号をまとめた標準的なページャーです。現在表示中の番号には is-on クラスが付き、背景が濃色に反転して「いま見ているのは3ページ目」と直感的に伝わります。
解説
記事一覧や検索結果でおなじみの、前後の矢印・ページ番号・現在地・省略記号をまとめた標準的なページャーです。現在表示中の番号には is-on クラスが付き、背景が濃色に反転して「いま見ているのは3ページ目」と直感的に伝わります。
実装は CSS のみで、各ボタンを min-width:36px の正方形に近い形に揃え、display:grid と place-items:center で数字を中央に配置しています。ホバー時は枠線と文字色がアクセントカラーへ変化し、押せることが分かります。途中の 省略記号はクリック不可の span として置き、ページ数が多いときに全番号を並べずに済ませています。
使う場面と差し替えどころ
- ブログやニュースの一覧ページ送り
- 商品検索結果の複数ページ表示
- テーブルやリストの分割ナビ
現在地の色は .pg a.is-on、ホバー色は .pg a:hover で変えられます。実運用では各番号を本物のリンクにし、現在ページの要素に aria-current を付けると、読み上げ環境でも現在地が正しく伝わります。番号の生成はサーバー側やフレームワーク側で行うのが一般的です。
使用例・適したシーン
- ブログ記事一覧
- 検索結果ページ
- EC 商品一覧
よくある質問
ボタンの大きさや色は変えられますか
変えられます。サイズは CSS の min-width と height、現在地の配色は .pg a.is-on、ホバー色は .pg a:hover を編集します。アクセントカラーを差し替えればサイト全体に馴染みます。
ページ数が多いときはどう表示しますか
省略記号の span を使い、先頭付近と末尾、現在地の前後だけを並べるのが定番です。全番号を表示せずに済むため、ページ数が多くても横に長くなりすぎません。