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

カード型タブ(浮き上がり表現・静止)

アクティブタブがパネルと地続きに手前へ浮いて見える静止表現。資料やレポート画面の見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="cardtabs">
            <span class="ctab">概要</span>
            <span class="ctab active">詳細</span>
            <span class="ctab">履歴</span>
          </div>
          <div class="cpanel">手前に浮き上がって見えるアクティブタブに接続したコンテンツ面(見本)。</div>
        </div>

CSS

.d03-07-07 .wrap{ width:100%; }
        .d03-07-07 .cardtabs{ display:flex; gap:2px; }
        .d03-07-07 .ctab{ padding:9px 16px; font-size:12.5px; color:#9ca3af; background:#f3f4f6; border-radius:10px 10px 0 0; }
        .d03-07-07 .ctab.active{ color:#111827; font-weight:600; background:#fff; box-shadow:0 -2px 6px rgba(0,0,0,.06); position:relative; z-index:2; }
        .d03-07-07 .cpanel{ background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); border-radius:0 10px 10px 10px; padding:16px; font-size:12.5px; color:#6b7280; line-height:1.6; }

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