パーツ番号 07-04-10 ・ CSSのみ

テーマカラー切替見本(静的)

同一レイアウトを3つの配色パターンで並べた比較見本です。色以外の構成は共通のため、配色だけの印象差をそのまま確認できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-04-10-wrap">
          <div class="d07-04-10-mini" style="--bg:#f8fafc;--fg:#2563eb;--tx:#0f172a">
            <span class="d07-04-10-dot"></span><span class="d07-04-10-bar"></span>
          </div>
          <div class="d07-04-10-mini" style="--bg:#0f172a;--fg:#f59e0b;--tx:#fff">
            <span class="d07-04-10-dot"></span><span class="d07-04-10-bar"></span>
          </div>
          <div class="d07-04-10-mini" style="--bg:#fdf4ff;--fg:#a855f7;--tx:#581c87">
            <span class="d07-04-10-dot"></span><span class="d07-04-10-bar"></span>
          </div>
        </div>

CSS

.d07-04-10-wrap{display:flex;gap:10px}
        .d07-04-10-mini{width:70px;height:96px;border-radius:10px;background:var(--bg);border:1px solid #e2e8f0;padding:10px 8px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 10px rgba(15,23,42,.06)}
        .d07-04-10-dot{width:16px;height:16px;border-radius:50%;background:var(--fg)}
        .d07-04-10-bar{display:block;height:6px;width:80%;border-radius:4px;background:var(--tx);opacity:.85}

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