CSS変数 (--property)

その他

CSS内で変数を定義・使用できる機能です。テーマ切り替えや保守性の向上に大きく貢献します。

構文

Syntax

--variable-name: <value>; property: var(--variable-name, <fallback>);

:root {
  --primary-color: #3b82f6;
  --spacing: 1rem;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

実行結果

var(--primary-color)

CSS変数でテーマ管理

グローバル変数の定義と使用

.card {
  --card-padding: 2rem;
  padding: var(--card-padding);
}

.card--compact {
  --card-padding: 1rem;
}

実行結果

通常カード

コンパクトカード

コンポーネントレベルでの変数オーバーライド

color: var(--text-color, #333);

実行結果

フォールバック値付き変数

フォールバック値付きの変数使用

JavaScriptから動的に変更可能。ダークモードの実装に必須。

変数名は大文字小文字を区別する。--で始める必要がある。

Chrome 49+, Firefox 31+, Safari 9.1+