CSS カスタムプロパティ

CSS カスタムプロパティとは

CSS カスタムプロパティ (CSS Variables) は、-- プレフィックスで変数を定義し、var() で参照する仕組みである。Sass の変数と異なり、ランタイムで動的に変更でき、JavaScript からもアクセスできる。

基本的な使い方

基本的な使い方の例を示す。

:root {
  --color-primary: #3b82f6;
  --color-text: #1f2937;
  --spacing-md: 1rem;
  --radius-md: 0.5rem;
}

.button {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

ダークモード

ダークモードの例を示す。

:root {
  --bg: #ffffff;
  --text: #1f2937;
  --border: #e5e7eb;
}

[data-theme="dark"] {
  --bg: #111827;
  --text: #f9fafb;
  --border: #374151;
}

body { background: var(--bg); color: var(--text); }
.card { border: 1px solid var(--border); }

// JavaScript でテーマを切り替え
document.documentElement.dataset.theme = 'dark';

カスタムプロパティはカスケードに従うため、親要素で値を変更すると子要素に伝播する。

Sass 変数との比較

Sass 変数との主な違いを以下に比較する。

観点	CSS カスタムプロパティ	Sass 変数
動的変更	✅ (ランタイム)	❌ (ビルド時に解決)
カスケード	✅ (継承される)	❌
JavaScript アクセス	✅	❌
メディアクエリ内で変更	✅	❌
フォールバック	var(--x, fallback)	なし

レスポンシブデザイン

レスポンシブデザインの例を示す。

:root {
  --container-width: 1200px;
  --font-size-base: 1rem;
}

@media (max-width: 768px) {
  :root {
    --container-width: 100%;
    --font-size-base: 0.875rem;
  }
}

.container { max-width: var(--container-width); }
body { font-size: var(--font-size-base); }

コンポーネントスコープ

コンポーネントスコープの例を示す。

.card {
  --card-padding: 1.5rem;
  --card-radius: 0.75rem;
  padding: var(--card-padding);
  border-radius: var(--card-radius);
}

.card--compact {
  --card-padding: 0.75rem;
  --card-radius: 0.375rem;
}

JavaScript からのアクセス

JavaScript からのアクセスのコード例を示す。

// 値の取得
const primary = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-primary');

// 値の設定
document.documentElement.style.setProperty('--color-primary', '#ef4444');

フォールバック

フォールバックの例を示す。

.text { color: var(--color-accent, #3b82f6); }
/* --color-accent が未定義なら #3b82f6 を使用 */

CSS カスタムプロパティの背景や設計思想は関連書籍に詳しい。