CSS カスタムプロパティ変数

CSS変数（カスタムプロパティ）入門
色やサイズを一元管理する

CSS変数（カスタムプロパティ）を使えば、色・フォントサイズ・余白などの値を変数として定義し、サイト全体で統一的に管理できます。
変更時も1箇所を修正するだけでサイト全体に反映されます。

こんな人向けの記事です

CSSの色やサイズを一元管理したい
テーマカラーの変更を簡単にしたい
ダークモードの実装方法を知りたい

Step 1CSS変数の基本

CSS変数は --変数名 で定義し、var(--変数名) で参照します。

CSS変数で色を指定したボックス

CSS

/* 変数を定義 */
:root {
  --primary-color: #3498db;
  --border-radius: 8px;
}

/* 変数を使う */
.box {
  background: var(--primary-color);
  color: white;
  padding: 20px;
  border-radius: var(--border-radius);
}

Step 2:root で全体に定義する

:root はHTML文書のルート要素（<html>）を指します。ここに定義すると全ての要素から参照できます。

CSS

:root {
  /* カラー */
  --color-primary: #0d6efd;
  --color-secondary: #6c757d;
  --color-success: #198754;
  --color-danger: #dc3545;
  --color-text: #212529;
  --color-bg: #ffffff;

  /* フォント */
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 20px;

  /* 余白 */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;

  /* ボーダー */
  --border-radius: 4px;
}

.button {
  background: var(--color-primary);
  font-size: var(--font-size-base);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
}

命名規則のコツ

--color-*、--font-*、--spacing-* のようにカテゴリを接頭辞にすると管理しやすくなります。

Step 3フォールバック値

var() の第2引数にフォールバック（デフォルト値）を指定できます。

CSS

/* --accent-color が未定義なら #e74c3c を使う */
.highlight {
  color: var(--accent-color, #e74c3c);
}

/* 変数の入れ子も可能 */
.text {
  color: var(--theme-color, var(--color-primary, blue));
}

Step 4スコープ（適用範囲）

CSS変数は特定の要素内だけで有効な「ローカル変数」としても使えます。

CSS

:root {
  --card-bg: #ffffff;
}

/* .dark-section 内だけ変数を上書き */
.dark-section {
  --card-bg: #2d2d2d;
}

.card {
  background: var(--card-bg);
}

Step 5実践：ダークモード

CSS

/* ライトモード（デフォルト） */
:root {
  --color-bg: #ffffff;
  --color-text: #212529;
  --color-card-bg: #f8f9fa;
  --color-border: #dee2e6;
}

/* ダークモード */
[data-theme="dark"] {
  --color-bg: #1a1a2e;
  --color-text: #e0e0e0;
  --color-card-bg: #16213e;
  --color-border: #333;
}

/* 変数を使ってスタイル定義（1回だけでOK） */
body {
  background: var(--color-bg);
  color: var(--color-text);
}
.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
}

JavaScript

// テーマ切り替え
function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  document.documentElement.setAttribute(
    'data-theme',
    current === 'dark' ? 'light' : 'dark'
  );
}

OSのダークモード設定に連動させる

@media (prefers-color-scheme: dark) を使えば、OSのダークモード設定に自動対応できます。

まとめ

--変数名 で定義、var(--変数名) で参照
:root に定義してサイト全体で使える
var(--変数名, フォールバック値) でデフォルト値を指定
要素単位でローカルに上書き可能（スコープ）
ダークモードの実装に最適

CSS変数（カスタムプロパティ）入門色やサイズを一元管理する