パーツ番号 03-07-03 ・ CSSのみ

ピル型セグメントタブ(静止)

角丸の枠内でアクティブな項目だけが白背景で浮くセグメントコントロールの見本。表示切替UIに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="segment">
          <span class="seg">リスト</span>
          <span class="seg active">グリッド</span>
          <span class="seg">マップ</span>
        </div>

CSS

.d03-07-03 .segment{ display:inline-flex; background:#e5e7eb; border-radius:999px; padding:4px; gap:2px; }
        .d03-07-03 .seg{ padding:8px 18px; font-size:13px; color:#6b7280; border-radius:999px; }
        .d03-07-03 .seg.active{ background:#fff; color:#111827; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.15); }

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