CSS変数（カスタムプロパティ）の実践的な使い方【コード付き】

この記事の対象: CSS変数を実務で活用したいフロントエンドエンジニア
読了時間: 約5分

CSS変数（カスタムプロパティ）は、CSSの中で値を変数として定義し再利用できる機能です。色やフォントサイズ、余白などを一元管理でき、テーマの切り替えやレスポンシブ対応が格段に楽になります。

CSS変数（カスタムプロパティ）とは

CSS変数は--で始まる名前を持つプロパティで、var()関数で参照します。2026年現在、すべての主要ブラウザで対応しています。

基本構文

/* 変数の定義（:rootで全体に適用） */
:root {
  --color-primary: #3b82f6;
  --color-text: #1a1a2e;
  --font-size-base: 16px;
  --spacing-md: 24px;
}

/* 変数の使用 */
.button {
  background-color: var(--color-primary);
  color: #fff;
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
}

/* フォールバック値（変数が未定義の場合の初期値） */
.card {
  border-color: var(--color-border, #e5e7eb);
}

実践パターン5選

①テーマカラーの一括管理

:root {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-secondary: #10b981;
  --color-bg: #ffffff;
  --color-text: #1a1a2e;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
}

.btn-primary {
  background: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
}

ブランドカラーを変更する場合、:rootの値を変えるだけでサイト全体に反映されます。

②ダークモード切り替え

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a2e;
  --color-surface: #f9fafb;
}

[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-text: #e2e8f0;
  --color-surface: #1e293b;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

HTML要素にdata-theme="dark"を付与するだけで、CSS変数の値が切り替わりダークモードになります。ダークモードの設計は「ダークモード対応のUIデザイン設計」をご覧ください。

③レスポンシブのフォントサイズ管理

:root {
  --font-size-h1: 2rem;
  --font-size-h2: 1.5rem;
  --font-size-body: 1rem;
  --spacing-section: 48px;
}

@media (min-width: 768px) {
  :root {
    --font-size-h1: 3rem;
    --font-size-h2: 2rem;
    --spacing-section: 80px;
  }
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
section { padding: var(--spacing-section) 0; }

メディアクエリでCSS変数の値だけを変更すれば、使用しているすべての場所に反映されます。

④コンポーネントのバリエーション管理

.card {
  --card-padding: 24px;
  --card-radius: 12px;
  --card-bg: var(--color-surface);

  padding: var(--card-padding);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.card--compact {
  --card-padding: 16px;
  --card-radius: 8px;
}

.card--featured {
  --card-bg: var(--color-primary);
  color: #fff;
}

バリエーションごとに変数の値だけをオーバーライドすることで、コンポーネントの見た目を柔軟に変更できます。

⑤JavaScriptとの連携

// CSS変数の値をJSから取得
const primary = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-primary');

// CSS変数の値をJSから変更
document.documentElement.style.setProperty('--color-primary', '#ef4444');

JavaScriptからCSS変数を読み書きできるため、ユーザー操作に応じたテーマ変更やアニメーション制御が可能です。

Sass変数との使い分け

2026年のベストプラクティス: テーマカラーやレスポンシブ値など動的に変更する可能性のあるものはCSS変数、コンパイル時の設定値やmixinはSass。

まとめ

CSS変数のポイントをまとめます。

• :rootでグローバルに定義し、var()で参照
• テーマカラーの一括管理で保守性が大幅に向上
• ダークモード切り替えがCSS変数で簡潔に実装可能
• メディアクエリ内で値を変更してレスポンシブ対応
• JavaScriptとの連携でインタラクティブな表現も可能