CSS変数って何？
CSS 変数（正式名称：カスタムプロパティ）は、CSS の中で使える「変数」のこと。 プログラミングで言う変数と同じ概念で、値に名前をつけて使い回せる。
❌ 変数なし（修正地獄）
.btn-primary { background: #059669; }
.link { color: #059669; }
.border-accent { border-color: #059669; }
.badge { background: #059669; }
/* 色変えたい → 全部探して直す地獄 */✅ 変数あり（1ヵ所直すだけ）
:root {
--color-accent: #059669; /* ここだけ変えればOK */
}
.btn-primary { background: var(--color-accent); }
.link { color: var(--color-accent); }
.border-accent { border-color: var(--color-accent); }
.badge { background: var(--color-accent); }書き方はたったこれだけ
-
変数の定義：
--変数名: 値;
必ず2本のハイフン（--）で始める。:rootに書くとサイト全体で使える。 -
変数の使用：
var(--変数名)
値を使いたい場所にvar()で呼び出す。それだけ。
実務で使うデザイントークンの例
:root {
/* ===== カラー ===== */
--color-primary: #059669;
--color-secondary: #0891b2;
--color-text: #0e0e0e;
--color-muted: #666666;
--color-bg: #fafaf8;
--color-border: #e8e8e8;
/* ===== タイポグラフィ ===== */
--font-body: 'Noto Sans JP', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 24px;
/* ===== スペーシング ===== */
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--space-xl: 64px;
/* ===== シェイプ ===== */
--radius-sm: 6px;
--radius-md: 12px;
--radius-full: 9999px;
}ダークモードも CSS 変数で一発対応
CSS 変数の真骨頂がこれ。prefers-color-scheme と組み合わせると、
ライト・ダークの切り替えがたった数行で実装できる。
ダークモード対応の書き方
:root {
--bg: #ffffff;
--text: #0e0e0e;
--card: #f8fafc;
}
/* OSの設定がダークモードのとき */
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f172a;
--text: #e2e8f0;
--card: #1e293b;
}
}
/* あとは普通に変数を使うだけ */
body { background: var(--bg); color: var(--text); }
.card { background: var(--card); }ボタンを押してテーマを切り替えてみよう。
CSS変数のデモ
変数を書き換えるだけでテーマが丸ごと変わる。これが CSS変数の魔法。
💡 ここが CSS変数の凄さ
JavaScript から document.documentElement.style.setProperty('--color-accent', '#ff0000')
と書くだけで、変数の値を動的に変更できる。
テーマ切り替え・ユーザーカスタマイズ・アニメーションなど応用範囲が広い。
スコープを使いこなす
変数は :root だけでなく、任意のセレクタに書ける。
コンポーネントごとに変数のスコープを作れるのが便利。
コンポーネントスコープの変数
/* グローバル変数 */
:root {
--color-primary: #059669;
}
/* .card コンポーネントでの上書き */
.card {
--card-padding: 24px;
--card-radius: 12px;
--card-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: var(--card-padding);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}
/* バリアントは変数だけ変える */
.card--large {
--card-padding: 40px;
--card-radius: 20px;
}まとめ ― CSS変数を使い始める3ステップ
:root { --変数名: 値; }でサイト全体の「デザイントークン」を定義する。var(--変数名)でどこからでも呼び出せる。色・サイズ・フォントを変数化しよう。- ダークモードは
@media (prefers-color-scheme: dark)で変数を上書きするだけ。
変数を使い始めると「もう戻れない」ってなるよ。 まず自分の CSS ファイルのカラーを変数化するところから始めてみて。