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

縦線区切りミニマルページネーション

数字の間に細い縦線を挟んだ余白重視のミニマルな形。装飾を抑えたシンプルなブログやポートフォリオに向きます。

staticcss

プレビュー

ソースコード

HTML

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

CSS

.d03-06-11-pager{display:flex;align-items:center;gap:12px;}
        .d03-06-11-num{font-size:14px;color:#9ca3af;font-weight:600;}
        .d03-06-11-active{color:#111827;}
        .d03-06-11-div{width:1px;height:14px;background:#e5e7eb;display:block;}

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