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

下線インジケーター型タブ(静止)

アクティブなタブの下に線を配置した定番の見た目。商品ページや管理画面の切替UIの見本として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="tabs">
            <span class="tab active">概要</span>
            <span class="tab">仕様</span>
            <span class="tab">レビュー</span>
          </div>
          <div class="panel">選択中のタブに対応する内容がここに表示されます。</div>
        </div>

CSS

.d03-07-01 .wrap{ width:100%; }
        .d03-07-01 .tabs{ display:flex; gap:20px; border-bottom:2px solid #e5e7eb; }
        .d03-07-01 .tab{ padding:10px 2px; font-size:14px; color:#9ca3af; position:relative; }
        .d03-07-01 .tab.active{ color:#111827; font-weight:600; }
        .d03-07-01 .tab.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#2563eb; }
        .d03-07-01 .panel{ margin-top:16px; font-size:13px; color:#6b7280; line-height:1.6; }

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