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

大きめタッチ対応ページネーション

ボタンサイズを大きく確保した、モバイル閲覧向けの形。指でのタップを想定した一覧ページの下部送りに適しています。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-06-10-pager">
          <span class="d03-06-10-btn">‹</span>
          <span class="d03-06-10-num d03-06-10-active">2</span>
          <span class="d03-06-10-btn">›</span>
        </nav>

CSS

.d03-06-10-pager{display:flex;align-items:center;gap:14px;}
        .d03-06-10-btn{
          width:52px;height:52px;border-radius:12px;
          display:flex;align-items:center;justify-content:center;
          background:#f3f4f6;color:#374151;font-size:20px;
        }
        .d03-06-10-num{
          width:52px;height:52px;border-radius:12px;
          display:flex;align-items:center;justify-content:center;
          background:#f3f4f6;color:#374151;font-size:18px;font-weight:700;
        }
        .d03-06-10-active{background:#1d4ed8;color:#fff;}

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