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

テキストラベル付きページネーション

「前へ」「次へ」の文字ラベルと矢印を組み合わせた形。現在ページと総ページ数も併記し、迷いにくい構成です。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-06-08-pager">
          <span class="d03-06-08-label">‹ 前へ</span>
          <span class="d03-06-08-num">3</span>
          <span class="d03-06-08-sep">/</span>
          <span class="d03-06-08-total">8</span>
          <span class="d03-06-08-label">次へ ›</span>
        </nav>

CSS

.d03-06-08-pager{display:flex;align-items:center;gap:10px;font-size:13px;}
        .d03-06-08-label{
          color:#2563eb;font-weight:600;
          padding:6px 10px;border:1px solid #bfdbfe;border-radius:6px;
          background:#eff6ff;
        }
        .d03-06-08-num{font-weight:700;color:#111827;font-size:16px;}
        .d03-06-08-sep{color:#9ca3af;}
        .d03-06-08-total{color:#6b7280;}

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