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

太字強調のみのミニマルタブ(静止)

背景や枠線を使わず太字だけでアクティブ状態を示す簡素な表現。テキスト主体のページ向けの見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="tabs">
          <span class="tab">プラン</span>
          <span class="tab active">請求先</span>
          <span class="tab">履歴</span>
        </div>

CSS

.d03-07-09 .tabs{ display:flex; gap:24px; }
        .d03-07-09 .tab{ font-size:14px; color:#9ca3af; padding:6px 0; }
        .d03-07-09 .tab.active{ color:#111827; font-weight:700; }

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