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

二段タブ(親子関係、静止)

上段の親カテゴリと下段のサブタブを組み合わせた二階層構成。管理画面の一覧フィルタなどの見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="parent">
            <span class="ptab active">商品</span>
            <span class="ptab">注文</span>
            <span class="ptab">顧客</span>
          </div>
          <div class="child">
            <span class="ctab2">全て</span>
            <span class="ctab2 active">公開中</span>
            <span class="ctab2">下書き</span>
          </div>
        </div>

CSS

.d03-07-10 .wrap{ width:100%; }
        .d03-07-10 .parent{ display:flex; gap:22px; border-bottom:1px solid #e5e7eb; padding-bottom:10px; margin-bottom:12px; }
        .d03-07-10 .ptab{ font-size:13.5px; color:#9ca3af; }
        .d03-07-10 .ptab.active{ color:#111827; font-weight:700; }
        .d03-07-10 .child{ display:flex; gap:8px; }
        .d03-07-10 .ctab2{ padding:5px 12px; font-size:12px; color:#6b7280; background:#f3f4f6; border-radius:999px; }
        .d03-07-10 .ctab2.active{ background:#111827; color:#fff; font-weight:600; }

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