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

件数表示付きページネーション

「1-10件 / 全50件」のような件数表示を添えた形。商品一覧や検索結果ページで全体量を伝えるのに役立ちます。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-06-09-wrap">
          <p class="d03-06-09-count">1-10件 / 全50件</p>
          <nav class="d03-06-09-pager">
            <span class="d03-06-09-num">1</span>
            <span class="d03-06-09-num d03-06-09-active">2</span>
            <span class="d03-06-09-num">3</span>
            <span class="d03-06-09-num">4</span>
            <span class="d03-06-09-num">5</span>
          </nav>
        </div>

CSS

.d03-06-09-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;}
        .d03-06-09-count{margin:0;font-size:12px;color:#6b7280;}
        .d03-06-09-pager{display:flex;gap:8px;}
        .d03-06-09-num{
          width:30px;height:30px;border-radius:6px;
          display:flex;align-items:center;justify-content:center;
          background:#f3f4f6;color:#374151;font-size:13px;font-weight:600;
        }
        .d03-06-09-active{background:#059669;color:#fff;}

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