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

丸型番号ページネーション

円形の番号ボタンが横に並ぶ基本形。ブログ一覧やニュース記事一覧の下部ページ送りに使いやすいデザインです。

staticcss

プレビュー

ソースコード

HTML

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

CSS

.d03-06-01-pager{display:flex;gap:10px;}
        .d03-06-01-num{
          width:36px;height:36px;border-radius:50%;
          display:flex;align-items:center;justify-content:center;
          background:#f3f4f6;color:#333;font-size:14px;font-weight:600;
          border:1px solid #e5e7eb;
        }
        .d03-06-01-active{
          background:#2563eb;color:#fff;border-color:#2563eb;
        }

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