パーツ番号 03-06-05 ・ CSSのみ

省略記号付きページネーション

中間のページ番号を「…」で省略し、最初・現在・最後のページのみ表示。ページ数が多い一覧に向いた形です。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-06-05-pager">
          <span class="d03-06-05-num">1</span>
          <span class="d03-06-05-dots">…</span>
          <span class="d03-06-05-num d03-06-05-active">5</span>
          <span class="d03-06-05-dots">…</span>
          <span class="d03-06-05-num">10</span>
        </nav>

CSS

.d03-06-05-pager{display:flex;align-items:center;gap:8px;}
        .d03-06-05-num{
          width:32px;height:32px;border-radius:6px;
          display:flex;align-items:center;justify-content:center;
          background:#f3f4f6;color:#374151;font-size:13px;font-weight:600;
        }
        .d03-06-05-active{background:#7c3aed;color:#fff;}
        .d03-06-05-dots{color:#9ca3af;font-size:13px;letter-spacing:1px;}

クラス名 .d03-06-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。