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

前後矢印付きページネーション

「‹ 1 2 3 ›」の定番構成。前後ページへの矢印記号を両端に添えた、一覧ページで広く使われる形です。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-06-03-pager">
          <span class="d03-06-03-arrow">‹</span>
          <span class="d03-06-03-num">1</span>
          <span class="d03-06-03-num d03-06-03-active">2</span>
          <span class="d03-06-03-num">3</span>
          <span class="d03-06-03-arrow">›</span>
        </nav>

CSS

.d03-06-03-pager{display:flex;align-items:center;gap:6px;}
        .d03-06-03-num{
          width:32px;height:32px;border-radius:6px;
          display:flex;align-items:center;justify-content:center;
          background:#f9fafb;color:#374151;font-size:13px;font-weight:600;
          border:1px solid #e5e7eb;
        }
        .d03-06-03-active{background:#0ea5e9;color:#fff;border-color:#0ea5e9;}
        .d03-06-03-arrow{
          width:32px;height:32px;border-radius:6px;
          display:flex;align-items:center;justify-content:center;
          color:#9ca3af;font-size:16px;
        }

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