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

Volardev 編集部 April 13, 2026

CSS 変数（カスタムプロパティ）を使用すると、ドキュメント全体で再利用可能な値を保持できます。大規模なサイトでは、同じ色が数百箇所で使われることも珍しくありません。変数を活用することで、一箇所の変更で全てのスタイルを更新できるようになり、コードの保守性が劇的に向上します。

1. var() 関数と CSS 変数

var() 関数は、CSS 変数の値を挿入するために使用されます。CSS 変数は、プログラミング言語の変数と同様に、特定の値を格納して後で参照できるようにする仕組みです。

1.1 基本的な構文

CSS 変数の宣言には、名前の前に 2 つのハイフン（--）を付ける必要があります。

/* 変数の宣言 */
element {
  --main-bg-color: brown;
}

/* 変数の使用 */
element {
  background-color: var(--main-bg-color);
}

2. 変数のスコープ：グローバルとローカル

CSS 変数にはスコープがあり、どこで宣言するかによって参照できる範囲が決まります。

2.1 グローバル変数（:root スコープ）

もっとも一般的な方法は、:root 擬似クラスで変数を宣言することです。:root は HTML ドキュメントのルート要素（<html>）に一致し、ここで定義された変数はドキュメント全体で利用可能なグローバル変数となります。

/* グローバル変数の宣言 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  color: var(--blue);
}

p {
  background-color: var(--blue);
  color: var(--white);
}

2.2 ローカル変数

特定のセレクタ内で宣言された変数は、その要素およびその子要素内でのみ有効なローカル変数となります。

/* ローカル変数の宣言例 */
.container {
  --container-padding: 20px;
}

.container p {
  padding: var(--container-padding); /* 有効 */
}

3. 変数のオーバーライド（上書き）

CSS 変数はカスケード（継承）のルールに従います。特定の要素で変数の値を再定義することで、その要素以下に適用される値を上書きできます。

以下の例では、:root で定義された値を .alert クラスを持つ要素内でのみ変更しています。

:root {
  --main-color: blue;
}

.alert {
  /* ここでは青ではなく赤が適用される */
  --main-color: red;
}

button {
  background-color: var(--main-color);
}

4. メディアクエリでの活用

CSS 変数は、メディアクエリの中でも変更可能です。これにより、画面サイズに応じてテーマの色やフォントサイズを一括で変更するレスポンシブな設計が非常に簡単になります。

:root {
  --main-bg-color: lightblue;
}

/* 画面幅が480px以上の場合、変数の値を書き換える */
@media screen and (min-width: 480px) {
  :root {
    --main-bg-color: lightgreen;
  }
}

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

5. JavaScript での変数の操作

CSS 変数は、JavaScript から動的に読み取ったり変更したりすることができます。これにより、ユーザーによるテーマ切り替え（ダークモードなど）を効率的に実装できます。

// 変数の値を取得する
let root = document.querySelector(':root');
let rootStyles = getComputedStyle(root);
let mainColor = rootStyles.getPropertyValue('--blue');

// 変数の値を書き換える
root.style.setProperty('--blue', 'lightblue');

6. CSS 変数プロパティ一覧

関数 / 擬似クラス	説明
`var(name, value)`	CSS 変数の値を挿入します。第 2 引数にフォールバック（代替値）を指定可能です。
`:root`	ドキュメントのルート要素を選択し、グローバル変数を定義するのに最適です。
`--name`	変数（カスタムプロパティ）を定義する際のプレフィックスです。

CSS 変数は現在のモダンブラウザでフルサポートされており、Sass や Less といったプリプロセッサの変数とは異なり、ブラウザ実行時に動的に値を変更できる点が最大の強みです。デザインシステムを構築する際は、まずカラーパレットやスペーシングを :root で変数化することから始めましょう。