2026年4月16日
CSS変数とは？同じ値を何度も書くのをやめよう
「同じ色コードを何箇所にも書いていて、変更するとき全部直すのが大変」「テーマカラーを一括で変えたい」——こんな悩みはありませんか？
CSSのカスタムプロパティ（CSS変数）を使えば、値を一箇所で定義して何度でも使い回せます。変更するときも1箇所直すだけで全体に反映されます。
この記事では、CSS変数の基本から、ダークモード対応やJavaScriptとの連携まで、実践的な使い方を解説します。
基本構文
/* 変数を定義する（:rootに書くとグローバル） */
:root {
--color-primary: #0d9488;
--color-text: #1f2937;
--space-md: 16px;
}
/* 変数を使う */
.btn {
background-color: var(--color-primary);
color: white;
padding: var(--space-md);
}
/* フォールバック値（変数が未定義のとき使われる） */
.card {
color: var(--color-text, #333);
}ルール
- 変数名は必ず
--（ハイフン2つ）で始める var(--変数名)で値を参照する:rootに定義するとページ全体で使える（グローバル）- 特定の要素に定義するとその要素内だけで使える（ローカル）
- プロパティの「値」にだけ使える（プロパティ名には使えない）
スコープの仕組み
:root {
--color-primary: #0d9488; /* グローバル */
}
.dark-section {
--color-primary: #5eead4; /* この要素内だけ上書き */
}
/* どちらの.btnも var(--color-primary) を使うが、
.dark-section内のボタンは明るい色になる */
.btn {
background-color: var(--color-primary);
}CSS変数はCSSの継承の仕組みに従います。親要素で定義した変数は子要素でも使えます。
実践コード例①：テーマカラーを変数で管理し、ダークモード切り替え
:root {
--color-primary: #0d9488;
--color-bg: #ffffff;
--color-text: #1f2937;
--color-border: #e5e7eb;
}
/* ダークモード */
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #5eead4;
--color-bg: #111827;
--color-text: #f9fafb;
--color-border: #374151;
}
}
/* 変数を使うだけで自動的にダークモード対応 */
body {
background-color: var(--color-bg);
color: var(--color-text);
}
.card {
border: 1px solid var(--color-border);
background-color: var(--color-bg);
}
a {
color: var(--color-primary);
}変数を使っておけば、ダークモード対応は:rootの値を変えるだけで完了します。メディアクエリの詳しい使い方はCSSメディアクエリの使い方を参照してください。
実践コード例②：スペーシング変数で余白を統一管理
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
}
.section {
padding: var(--space-xl) var(--space-lg);
}
.card {
padding: var(--space-lg);
margin-bottom: var(--space-md);
}
.btn {
padding: var(--space-sm) var(--space-md);
}余白を変数で管理すると、サイト全体の余白感を統一できます。余白の基本はmarginとpaddingの違いで復習できます。
実践コード例③：コンポーネントごとにローカル変数でカスタマイズ
/* ボタンコンポーネント: ローカル変数でバリエーション作成 */
.btn {
--btn-bg: #0d9488;
--btn-color: white;
--btn-radius: 8px;
background-color: var(--btn-bg);
color: var(--btn-color);
border-radius: var(--btn-radius);
padding: 10px 20px;
border: none;
}
/* バリエーションは変数を上書きするだけ */
.btn--danger {
--btn-bg: #ef4444;
}
.btn--outline {
--btn-bg: transparent;
--btn-color: #0d9488;
border: 2px solid #0d9488;
}
.btn--pill {
--btn-radius: 9999px;
}ローカル変数を使うと、コンポーネントのバリエーションを簡潔に作れます。
calc()との組み合わせ
:root {
--space-unit: 8px;
}
.card {
padding: calc(var(--space-unit) * 3); /* 24px */
margin-bottom: calc(var(--space-unit) * 2); /* 16px */
}
.container {
max-width: calc(100% - var(--space-unit) * 4); /* 両端に32pxの余白 */
}calc()と変数を組み合わせると、基準値から計算で他の値を導出できます。詳しくはCSS calc()入門を参照してください。
JavaScriptから変数を操作する
// CSS変数の値を取得
const root = document.documentElement;
const primary = getComputedStyle(root).getPropertyValue('--color-primary');
// CSS変数の値を変更（テーマ切り替えなどに使える）
root.style.setProperty('--color-primary', '#3b82f6');JavaScriptからCSS変数を変更すると、その変数を使っているすべての要素のスタイルが一度に変わります。
よくある間違い・注意点
❌ 変数名の--を忘れる
/* NG */
:root { color-primary: #0d9488; }
/* OK */
:root { --color-primary: #0d9488; }❌ フォールバック値を設定しない
変数が未定義の場合に備えて、var(--color, #333) のようにフォールバック値を設定する習慣をつけましょう。
❌ プロパティ名に変数を使おうとする
/* NG: プロパティ名には使えない */
.box {
--prop: margin;
var(--prop): 16px; /* エラー */
}
/* OK: 値にだけ使える */
.box {
--size: 16px;
margin: var(--size);
}ブラウザ対応状況
CSS変数は全モダンブラウザ（Chrome・Firefox・Safari・Edge）で対応しています。IE11は非対応ですが、2026年現在IE対応は不要です。
CSS変数を使うときのコツ
変数の名前は、何を表しているかがわかるようにつけましょう。たとえば「--color-1」よりも「--primary-color」のほうが、あとから見たときに意味がわかります。
変数をたくさん作りすぎると、かえって管理が大変になります。最初は色とフォントサイズだけを変数にするのがおすすめです。慣れてきたら余白やボーダーの値も変数にしていきましょう。
また、CSS変数はJavaScriptから値を変更することもできます。たとえばダークモードの切り替えボタンを作るとき、JavaScriptで変数の値を書き換えれば、ページ全体の配色を一瞬で変えられます。変数を使っていれば、一つの値を変えるだけで全体に反映されるので効率的です。
まとめ
- ✅
--変数名: 値で定義、var(--変数名)で使用 - ✅
:rootに書くとグローバル、要素に書くとローカル - ✅ ダークモードは変数の値を切り替えるだけで対応できる
- ✅ calc()と組み合わせて計算もできる
- ✅ JavaScriptから動的に変更可能
- ✅ 「一箇所変えれば全部変わる」保守性の高いCSSが書ける
まずは色とスペーシングの変数化から始めましょう。カスタムプロパティの基礎はCSSカスタムプロパティ入門で学べます。色の指定方法はCSSで色を指定する方法を参照してください。レスポンシブでの変数活用はレスポンシブデザインの作り方で解説しています。CSSの基礎全体はCSSとは？初心者向け解説で学べます。
関連記事
- CSSカスタムプロパティ入門 — 基礎から学ぶ
- CSSで色を指定する方法 — 色の指定方法を復習
- CSS calc()入門 — 変数とcalcの組み合わせ
- レスポンシブデザインの作り方 — レスポンシブでの変数活用
- CSSメディアクエリの使い方 — メディアクエリで変数を切り替え
🎛️ CSS Variables を動かして体感しよう！
6つのカスタムプロパティをリアルタイム編集。プリセット4種・スコープ切替でvar()の仕組みを直感的に理解できます。
CSS Variables プレイグラウンド →