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

3択セグメントコントロール(ライト/ダーク/自動)

ライト・ダーク・自動の3状態をアイコン付きセグメントで並べた静止見本です。「ダーク」選択中の状態を固定表示し、設定画面のテーマ選択UIに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-15-03-seg">
          <span class="d11-15-03-opt">
            <svg viewBox="0 0 24 24" width="13" height="13"><circle cx="12" cy="12" r="5" fill="#f59e0b"/></svg>
            ライト
          </span>
          <span class="d11-15-03-opt d11-15-03-active">
            <svg viewBox="0 0 24 24" width="13" height="13"><path d="M12 3a9 9 0 109 9c0-.46-.04-.92-.1-1.36A7 7 0 1113.36 3.1 9.13 9.13 0 0012 3z" fill="#1e293b"/></svg>
            ダーク
          </span>
          <span class="d11-15-03-opt">
            <svg viewBox="0 0 24 24" width="13" height="13"><rect x="3" y="4" width="18" height="13" rx="2" fill="#94a3b8"/><line x1="8" y1="20" x2="16" y2="20" stroke="#94a3b8" stroke-width="2"/></svg>
            自動
          </span>
        </div>

CSS

.d11-15-03-seg{display:flex;background:#f3f4f6;border-radius:9px;padding:3px;width:220px}
        .d11-15-03-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:600;color:#6b7280;padding:7px 0;border-radius:7px}
        .d11-15-03-active{background:#fff;color:#111827;box-shadow:0 1px 3px rgba(0,0,0,.15)}

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