ページネーション（枠付き）
「前へ」「次へ」の矢印、番号ボタン、省略の「…」を横一列に並べた、枠付きのページネーションです。各ボタンは min-width:38px ・高さ38pxの正方形に近い形で、白背景に薄い枠線を付けています。
このパーツの使いどころと実装ポイント
「前へ」「次へ」の矢印、番号ボタン、省略の「…」を横一列に並べた、枠付きのページネーションです。各ボタンはmin-width:38px・高さ38pxの正方形に近い形で、白背景に薄い枠線を付けています。現在のページはpg-bd__onクラスで濃紺に塗りつぶし、今どこを見ているかが一目で分かるようにしています。省略の「…」はクリックできない案内用の記号です。
向いている場面
ブログの記事一覧、ニュースアーカイブ、商品一覧など、ページ数が多くて分割表示するすべての場面に向きます。全12ページのうち離れたページ番号を「…」で省く形なので、ページ数が増えても横幅を取りすぎません。
カスタマイズと注意点
- 現在ページは
pg-bd__onを付け替えるだけで移動します。実際にどのページを表示するかは、サーバーやJavaScript側でリンク先を組み立てる必要があります。 - ボタンは
flex-wrapで折り返すので、番号を増やしても画面からはみ出さず次の行に回ります。 - アクセシビリティのため
nav要素で囲い、現在ページのボタンにはaria-current="page"を付けると、読み上げ環境でも現在地が伝わります。
よくある質問
現在のページはどう指定しますか？
番号ボタンにpg-bd__onクラスを付けると濃紺で塗られ、現在ページとして強調されます。ページが切り替わるたびに、このクラスを該当の番号へ付け替えてください。
ページ数が多くても崩れませんか？
崩れにくい作りです。ボタンはflex-wrapで折り返す指定があり、番号が増えても次の行に回ります。さらに離れたページを「…」で省略しているため、横幅を取りすぎません。