CSS変数（カスタムプロパティ）の使い方と活用例

2025.10.10

CSS変数（カスタムプロパティ）は、スタイルをより柔軟に管理できる強力な機能です。繰り返し使う色やフォントサイズなどを変数化することで、デザインの統一や保守性を高めることができます。本記事では、基本的な使い方から応用的な活用例までを解説します。

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

1 CSS変数（カスタムプロパティ）とは
2 CSS変数の基本構文
3 例：背景色と文字色の切り替え
4 テーマ切り替えへの応用
5 メディアクエリとの組み合わせ
6 JavaScriptとの連携
7 まとめ

CSS変数（Custom Properties）は、変数名を使って値を格納し、再利用できる仕組みです。Sassなどのプリプロセッサを使わなくても、純粋なCSSで実現できます。

CSS

:root {
  --main-color: #3498db;
  --accent-color: #e74c3c;
  --font-size-large: 1.2rem;
}

button {
  background: var(--main-color);
  color: #fff;
  font-size: var(--font-size-large);
}

:root {
  --main-color: #3498db;
  --accent-color: #e74c3c;
  --font-size-large: 1.2rem;
}

button {
  background: var(--main-color);
  color: #fff;
  font-size: var(--font-size-large);
}

:root はHTML文書全体を対象としたセレクタで、ここに定義した変数はどの要素からでも利用可能です。

CSS変数の基本構文

変数の定義： --変数名: 値;
変数の使用： var(--変数名)

例：背景色と文字色の切り替え

CSS

:root {
  --bg-color: #fff;
  --text-color: #333;
}

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

:root {
  --bg-color: #fff;
  --text-color: #333;
}

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

テーマ切り替えへの応用

CSS変数を使えば、ダークモードやテーマカラーの切り替えも簡単に実現できます。

CSS

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f0f0f0;
}

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

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f0f0f0;
}

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

JavaScriptで data-theme 属性を切り替えるだけで、テーマを動的に変更できます。

メディアクエリとの組み合わせ

メディアクエリ内でCSS変数を上書きすることで、レスポンシブ対応も容易になります。

CSS

:root {
  --container-width: 1200px;
}

@media (max-width: 768px) {
  :root {
    --container-width: 90%;
  }
}

.container {
  width: var(--container-width);
  margin: 0 auto;
}

:root {
  --container-width: 1200px;
}

@media (max-width: 768px) {
  :root {
    --container-width: 90%;
  }
}

.container {
  width: var(--container-width);
  margin: 0 auto;
}

JavaScriptとの連携

CSS変数はJavaScriptからも読み書き可能です。ユーザー操作に応じたテーマ変更などに応用できます。

JavaScript

const root = document.documentElement;

// 値を取得
const mainColor = getComputedStyle(root).getPropertyValue('--main-color');

// 値を変更
root.style.setProperty('--main-color', '#2ecc71');

const root = document.documentElement;

// 値を取得
const mainColor = getComputedStyle(root).getPropertyValue('--main-color');

// 値を変更
root.style.setProperty('--main-color', '#2ecc71');

まとめ

CSS変数は保守性・再利用性を高める便利な仕組み
:root で定義すれば全体で利用可能
メディアクエリやJavaScriptと組み合わせるとさらに強力

カスタムプロパティを活用することで、よりスケーラブルでモダンなCSS設計が可能になります。