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

背景塗りつぶし型タブ(静止)

選択中タブの背景を塗りつぶして強調する表現。ダッシュボードの期間切替などに適した見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="tabs">
            <span class="tab">日次</span>
            <span class="tab active">週次</span>
            <span class="tab">月次</span>
          </div>
          <div class="panel">週次で集計されたデータの表示エリアです。</div>
        </div>

CSS

.d03-07-02 .wrap{ width:100%; }
        .d03-07-02 .tabs{ display:flex; gap:6px; background:#f3f4f6; padding:6px; border-radius:10px; }
        .d03-07-02 .tab{ flex:1; text-align:center; padding:8px 4px; font-size:13px; color:#6b7280; border-radius:7px; }
        .d03-07-02 .tab.active{ background:#111827; color:#fff; font-weight:600; }
        .d03-07-02 .panel{ margin-top:16px; font-size:13px; color:#6b7280; line-height:1.6; }

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