カスタムプロパティ
上級読み方：カスタムプロパティ｜英語：Custom Property
CSS変数のことで、--変数名: 値; で定義し、var(--変数名) で使うよ。色やサイズの一括管理に便利。いつ使う？ サイト全体のテーマカラーを1箇所で管理したい、ダークモード対応したい、同じ値を何度も書きたくないときに使うよ。間違いやすいポイント: 変数名は必ず--（ハイフン2つ）で始めるよ。また、定義した場所より上の要素では使えない（スコープがある）から、:rootで定義するのが一般的だよ。
やさしい説明
カスタムプロパティ（CSS変数）は、値に名前をつけて再利用する仕組みです。-- で始まる名前で定義し、var() で使います。
サイト全体のメインカラーを1箇所で管理できます。色を変えたいとき、変数の値を1つ変えるだけで全ページに反映されます。
ダークモードの切り替えにも使われます。変数の値を切り替えるだけで、サイト全体の配色が変わります。
具体例・使い方
/* 変数を定義（:rootで全体に適用） */
:root {
--main-color: #0d9488;
--spacing: 16px;
}
/* 変数を使う */
.btn { background: var(--main-color); }
.card { padding: var(--spacing); }
/* ダークモード */
.dark { --main-color: #5eead4; }いつ使う？
サイト全体の色・フォント・余白を統一管理するとき、ダークモード対応、テーマ切り替え機能を作るときに使います。
間違いやすいポイント
❌ -- を付け忘れる
/* ❌ ハイフン2つが必要 */
:root { main-color: blue; }
/* ✅ 正しい書き方 */
:root { --main-color: blue; }よくある疑問
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; } } のように変数の値だけ切り替えます。
関連用語
📖 関連レッスン
レッスンを見る →