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

現在ページ強調型ページネーション

現在表示中のページ番号だけを色付き背景で目立たせる形。今どのページを見ているかが一目で分かります。

staticcss

プレビュー

ソースコード

HTML

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

CSS

.d03-06-04-pager{display:flex;gap:12px;}
        .d03-06-04-num{
          width:34px;height:34px;
          display:flex;align-items:center;justify-content:center;
          color:#6b7280;font-size:14px;font-weight:600;
          border-radius:50%;
        }
        .d03-06-04-active{
          background:#f97316;color:#fff;
          box-shadow:0 3px 8px rgba(249,115,22,.35);
        }

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