ページネーション（前 / 後 / 数字）
ブログ一覧や検索結果の下に置く、ページ送り UI です。前へ・後ろへのボタン、ページ番号、件数が多いときの省略記号「…」を inline-flex で横一列に並べています。各番号は min-width と height を揃えて正方形に近いタップ領域を確保し、現在表示中のページには is-current クラスを付…
解説
ブログ一覧や検索結果の下に置く、ページ送り UI です。前へ・後ろへのボタン、ページ番号、件数が多いときの省略記号「…」を inline-flex で横一列に並べています。各番号は min-width と height を揃えて正方形に近いタップ領域を確保し、現在表示中のページには is-current クラスを付けてアクセントカラーで塗りつぶし、はっきり区別できるようにしています。ホバー時は枠線と文字色が変わる transition 付きです。
使いどころ
- 記事数の多いブログ・メディアの一覧ページ
- 検索結果や商品一覧の、ページ単位での絞り込み導線
- サーバー側でページ分割しているコンテンツの送り UI
現在ページの色は is-current の背景色で、ボタンや番号の見た目は枠線色や角丸で調整できます。アクセシビリティ上は、現在ページに aria-current="page" を付け、前後ボタンには「前のページ」「次のページ」が分かる aria-label を添えると親切です。タップ領域は指でも押しやすいよう小さくしすぎないこと、無効な「前へ」は押せない見た目にしておくと迷いません。番号の出し方（前後何件まで表示し、どこで「…」にするか）はサーバー側のロジックと合わせて設計します。
使用例・適したシーン
- ブログ記事一覧
- 検索結果ページ
- EC 商品一覧
よくある質問
現在のページはどう強調していますか？
現在表示中の番号に is-current クラスを付け、CSS でアクセントカラーの背景に白文字で塗りつぶして強調しています。色を変えたい場合は .pg .is-current の background と color を編集してください。加えて、その項目に aria-current="page" を付けると、読み上げ環境にも現在地が伝わります。
ページ番号の省略「…」はどう出しますか？
このコードでは span 要素として「…」を静的に置いています。実際のサイトでは、現在ページの前後数件だけ番号を出し、それ以外を「…」でまとめるロジックをサーバー側やテンプレート側で組み、出力する HTML を生成します。表示の見た目はそのまま CSS が整えます。