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

角丸四角ページネーション

角丸の四角ボタンが並ぶページ送り。商品一覧やコラム一覧など、四角い枠デザインのサイトと相性が良い形です。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-06-02-pager">
          <span class="d03-06-02-num">1</span>
          <span class="d03-06-02-num">2</span>
          <span class="d03-06-02-num d03-06-02-active">3</span>
          <span class="d03-06-02-num">4</span>
          <span class="d03-06-02-num">5</span>
        </nav>

CSS

.d03-06-02-pager{display:flex;gap:8px;}
        .d03-06-02-num{
          width:38px;height:38px;border-radius:8px;
          display:flex;align-items:center;justify-content:center;
          background:#fff;color:#374151;font-size:14px;font-weight:600;
          border:1px solid #d1d5db;
        }
        .d03-06-02-active{
          background:#111827;color:#fff;border-color:#111827;
        }

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