パーツ番号 03-07-04 ・ 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-04 .wrap{ width:100%; }
        .d03-07-04 .tabs{ display:flex; gap:10px; }
        .d03-07-04 .tab{ padding:8px 14px; font-size:13px; color:#6b7280; border:1px solid transparent; border-radius:8px; }
        .d03-07-04 .tab.active{ border-color:#2563eb; color:#2563eb; font-weight:600; }
        .d03-07-04 .panel{ margin-top:16px; font-size:13px; color:#6b7280; line-height:1.6; }

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