ナビ・リスト操作
ページネーション
前へ／次へと番号ボタンで構成する定番ページャ。ページ数が多いときは「…」で省略し、現在のページを藍色で示す。クリックでページが切り替わる。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
表示するページ番号は「先頭・末尾・現在地の前後」を集合で作り、飛んだ区間だけ「…」に畳んでいます。現在ページは aria-current="page"、両端では前へ/次へを disabled にします。ページ変更は aria-live の status で読み上げます。
コード（コピーして使えます）
<div class="pg-wrap">
<p class="pg-status" id="pg-status" role="status" aria-live="polite">1 / 12 ページ</p>
<nav class="pg" aria-label="ページ送り">
<button class="pg-btn pg-arrow" id="pg-prev" aria-label="前のページ" disabled>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><polyline points="9,3 5,7 9,11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<div class="pg-nums" id="pg-nums"></div>
<button class="pg-btn pg-arrow" id="pg-next" aria-label="次のページ">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><polyline points="5,3 9,7 5,11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</nav>
</div>