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

ドットインジケーター型タブ(静止)

各タブラベルの前に小さな丸ドットを添え、アクティブ時だけ色を変える見た目。切替範囲を柔らかく示したいUIの見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="tabs">
            <span class="tab"><span class="dot"></span>チーム</span>
            <span class="tab active"><span class="dot"></span>個人</span>
            <span class="tab"><span class="dot"></span>ゲスト</span>
          </div>
          <div class="panel">個人モードで表示中のコンテンツ枠(見本)。</div>
        </div>

CSS

.d03-07-11 .wrap{ width:100%; }
        .d03-07-11 .tabs{ display:flex; gap:18px; }
        .d03-07-11 .tab{ display:flex; align-items:center; gap:6px; font-size:13px; color:#9ca3af; padding:6px 0; }
        .d03-07-11 .dot{ width:6px; height:6px; border-radius:50%; background:#d1d5db; display:inline-block; }
        .d03-07-11 .tab.active{ color:#111827; font-weight:600; }
        .d03-07-11 .tab.active .dot{ background:#7c3aed; }
        .d03-07-11 .panel{ margin-top:16px; font-size:13px; color:#6b7280; line-height:1.6; }

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