← 静的パーツギャラリーへ戻る

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

スライダー型テーマ切替(明るい⇄暗い)

明るい色から暗い色へグラデーションするバー上につまみを固定表示したスライダー型の見本です。設定パネルの明度調整風テーマ切替に応用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-15-02-wrap">
          <span class="d11-15-02-icon-side">
            <svg viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="5" fill="#f59e0b"/><g stroke="#f59e0b" stroke-width="2" stroke-linecap="round"><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/></g></svg>
          </span>
          <span class="d11-15-02-track">
            <span class="d11-15-02-thumb"></span>
          </span>
          <span class="d11-15-02-icon-side">
            <svg viewBox="0 0 24 24" width="16" height="16"><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="#e2e8f0"/></svg>
          </span>
        </div>
        <p class="d11-15-02-cap">暗いモードを選択中</p>

CSS

.d11-15-02{flex-direction:column;gap:10px}
        .d11-15-02-wrap{display:flex;align-items:center;gap:8px}
        .d11-15-02-track{position:relative;width:120px;height:10px;border-radius:5px;background:linear-gradient(90deg,#fde68a,#1e293b);display:inline-block}
        .d11-15-02-thumb{position:absolute;top:-5px;right:-2px;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #1e293b;box-sizing:border-box}
        .d11-15-02-cap{font-size:12px;color:#64748b;margin:0}

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