カスタムプロパティ
上級読み方：カスタムプロパティ｜英語：Custom Property
CSS変数のことで、--変数名: 値; で定義し、var(--変数名) で使うよ。色やサイズの一括管理に便利。
やさしい説明
カスタムプロパティ（CSS変数）は、値に名前をつけて再利用する仕組みです。-- で始まる名前で定義し、var() で使います。
サイト全体のメインカラーを1箇所で管理できます。色を変えたいとき、変数の値を1つ変えるだけで全ページに反映されます。
ダークモードの切り替えにも使われます。変数の値を切り替えるだけで、サイト全体の配色が変わります。
具体例・使い方
/* 変数を定義（:rootで全体に適用） */
:root {
--color-primary: #0d9488;
--color-text: #1f2937;
--spacing-md: 16px;
--spacing-lg: 32px;
--radius: 8px;
}
/* 変数を使う */
.btn {
background: var(--color-primary);
padding: var(--spacing-md);
border-radius: var(--radius);
}
.card {
padding: var(--spacing-lg);
color: var(--color-text);
}ダークモードへの応用
/* ライトモード（デフォルト） */
:root {
--bg: #ffffff;
--text: #1f2937;
}
/* ダークモード */
.dark {
--bg: #111827;
--text: #f9fafb;
}
/* 変数を使えばクラス切り替えだけで全体が変わる */
body {
background: var(--bg);
color: var(--text);
}変数を使わないと、ダークモード対応で数十〜数百箇所の色を書き直す必要があります。カスタムプロパティを使えば :root の値を変えるだけで済みます。
フォールバック値の指定
/* var(変数名, フォールバック値) */
.btn {
/* --accent が未定義のとき blue を使う */
background: var(--accent, blue);
}
/* JavaScriptから変数を変更することもできる */
document.documentElement.style.setProperty("--color-primary", "#ef4444");いつ使う？
- サイト全体の色・フォント・余白を1箇所で統一管理したいとき
- ダークモード・テーマ切り替えを実装するとき
- 同じ値（カラーコードや余白サイズ）を複数箇所で使い回すとき
- JavaScriptから動的にスタイルを変更したいとき
間違いやすいポイント
❌ -- を付け忘れる・var() を忘れる
定義時は --変数名: 値、使用時は var(--変数名) の両方が必要です。どちらかを忘れると機能しません。
/* ❌ ハイフン2つが必要 */
:root { main-color: blue; }
.btn { background: main-color; }
/* ✅ 正しい書き方 */
:root { --main-color: blue; }
.btn { background: var(--main-color); }❌ IE11では使えない
CSS カスタムプロパティはIE11非対応です。IE対応が必要なプロジェクトではSassの変数（$変数名）を検討しましょう。現在の多くのプロジェクトではIE非対応を前提にできます。
よくある疑問
Q: カスタムプロパティの書き方は？
A: :root { --main-color: #3a86ff; } で定義し、.btn { color: var(--main-color); } で使います。:rootに書けば全体で使えます。
Q: Sassの変数との違いは？
A: Sassの変数はビルド時に値が確定しますが、カスタムプロパティは実行時に変更可能です。JavaScriptから値を変えたり、メディアクエリで切り替えたりできます。
Q: ダークモード対応に使うには？
A: :root { --bg: white; } @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } } のように変数の値だけ切り替えます。
関連用語
📖 関連レッスン
レッスンを見る →