【CSS】変数(カスタムプロパティ)の使い方まとめ！基本からJavaScript連携まで徹底解説

Webサイトの規模が大きくなるにつれて、「サイト全体のテーマカラーを一括で変更したい」「余白のサイズを統一して管理したい」といったニーズが出てきます。

そんな時に役立つのが、CSSだけで値を管理できる 「CSS変数（カスタムプロパティ）」 です。

かつてはSass（SCSS）などのプリプロセッサを使わなければ変数は扱えませんでしたが、現在では標準のCSS機能として、ブラウザ上で動的に変数を扱えるようになりました。

これにより、JavaScriptと連携してリアルタイムにデザインを変更したり、レスポンシブ対応を効率化したりすることが可能です。

この記事では、CSS変数の基本的な書き方から、計算式（calc）との組み合わせ、JavaScriptでの操作方法まで、実務ですぐに使えるテクニックをサンプルコード付きで徹底解説します。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

CSS変数（カスタムプロパティ）とは？
1. Sassの変数との違い
CSS変数の基本的な書き方と呼び出し方
1. 1. 変数を定義する（–変数名）
2. 2. 変数を呼び出す（var関数）
スコープ（有効範囲）と継承の仕組み
1. 局所的に変数を上書きする
応用テクニック：calc()関数やメディアクエリでの活用
1. calc() 関数と組み合わせて柔軟なサイズを作る
2. メディアクエリで変数の値だけを切り替える
JavaScriptからCSS変数を操作する方法
1. JavaScriptでCSS変数を取得・設定する
HTML/CSSのスキルを活かして年収を上げる方法

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

CSS変数とは、その名の通り 「CSSの中で特定の値を格納しておき、好きな場所で使い回せる仕組み」 のことです。
正式名称は「カスタムプロパティ」と呼ばれます。

例えば、サイトのメインカラーを #3498db と決めた場合、従来は各セレクタに直接カラーコードを書いていました。

しかし、これだと色を変更する際にすべての箇所を修正しなければなりません。

CSS変数を使えば、1箇所で定義した変数を参照するだけで済むため、メンテナンス性が劇的に向上します。

Sassの変数との違い

Sassの変数はコンパイル時（CSSファイルを作る時）に値が固定されますが、CSS変数は ブラウザがページを表示する時（実行時）に評価 されます。

そのため、画面幅に応じて変数の値を変えたり、JavaScriptで動的に書き換えたりできるのが大きな強みです。

CSS変数の基本的な書き方と呼び出し方

CSS変数の使い方は、「定義する」と「呼び出す」の2ステップで完了します。

まずは、サイト全体で使えるグローバルな変数の作り方を見ていきましょう。

1. 変数を定義する（–変数名）

変数を定義する際は、プロパティ名の先頭にハイフン2つ –– を付けます。

サイト全体で使いたい場合は、:root 擬似クラス（htmlタグに相当）に定義するのが一般的です。

:root {
    /* 色の定義 */
    --main-color: #e67e22;
    --text-color: #333333;
    
    /* サイズの定義 */
    --base-spacing: 16px;
}

:root ブロック内に書くことで、すべての要素から参照できる「グローバル変数」になります。

変数名（--main-color など）は自由に決められますが、大文字と小文字は区別される点に注意してください。

2. 変数を呼び出す（var関数）

定義した変数を使うには、var() 関数を使用します。

.button {
    /* 定義した変数を使用 */
    background-color: var(--main-color);
    color: white;
    padding: var(--base-spacing);
}

.title {
    color: var(--main-color);
    margin-bottom: var(--base-spacing);
}

background-color: var(--main-color); と記述することで、ブラウザは :root で定義された #e67e22 を読み込み、適用します。

もし後でメインカラーを変更したくなっても、:root 内の値を1つ書き換えるだけで、.button も .title も一括で色が変更されます。

スコープ（有効範囲）と継承の仕組み

CSS変数は、定義した要素の「子孫要素」に継承されます。

:root で定義すれば全体で使えますが、特定のクラス内だけで変数を上書き（再定義）することも可能です。

これを「変数のスコープ」と呼びます。

局所的に変数を上書きする

:root {
    --card-bg: #ffffff; /* デフォルトは白 */
}

.card {
    background-color: var(--card-bg);
    border: 1px solid #ccc;
    padding: 20px;
}

/* ダークモード風のカード */
.card-dark {
    --card-bg: #2c3e50; /* この要素内だけ変数を上書き */
    color: white;
}

<div class="card">
    通常のカード（背景は白）
</div>

<div class="card card-dark">
    ダークなカード（背景は濃紺）
</div>

.card-dark クラスの中で --card-bg を再定義しています。

これにより、var(--card-bg) は、.card-dark の内部では #2c3e50 として機能し、それ以外の場所では元の #ffffff として機能します。

コンポーネントごとにテーマカラーを変えたい場合などに非常に便利なテクニックです。

応用テクニック：calc()関数やメディアクエリでの活用

CSS変数の真価は、他のCSS機能と組み合わせた時に発揮されます。

特に計算式（calc）やレスポンシブ対応での活用は、現代のコーディングにおいて必須級のテクニックです。

calc() 関数と組み合わせて柔軟なサイズを作る

変数を「基準値」として使い、計算によってバリエーションを作ることができます。

:root {
    --base-size: 10px;
}

.box-small {
    padding: var(--base-size); /* 10px */
}

.box-large {
    /* 基準値の2倍 */
    padding: calc(var(--base-size) * 2); /* 20px */
}

calc(var(--base-size) * 2) のように記述することで、変数の値を元に計算を行います。

デザインの基準となるサイズ（ベースサイズ）を変数化しておけば、全体のバランスを保ちながらサイズ調整が容易になります。

メディアクエリで変数の値だけを切り替える

スマホとPCで余白やフォントサイズを変えたい場合、従来は各セレクタごとに値を書き換えていました。

CSS変数を使えば、変数の定義だけを切り替えることで、コードを劇的に短くできます。

:root {
    --container-padding: 20px;
    --font-size-lg: 18px;
}

/* PC向けのスタイル（画面幅768px以上） */
@media (min-width: 768px) {
    :root {
        --container-padding: 40px; /* 余白を広げる */
        --font-size-lg: 24px;      /* 文字を大きくする */
    }
}

.container {
    padding: var(--container-padding);
}

.headline {
    font-size: var(--font-size-lg);
}

メディアクエリの中で :root の変数を再定義しています。

.container や .headline のスタイル記述を変更することなく、画面幅に応じて自動的に値が切り替わります。保守性が高く、見通しの良いコードになります。

JavaScriptからCSS変数を操作する方法

CSS変数はブラウザ上で実行時に評価されるため、JavaScriptを使ってリアルタイムに値を取得・変更することができます。

これにより、ユーザー操作に応じたダークモードの切り替えや、マウス位置に連動したアニメーションなどが実現できます。

JavaScriptでCSS変数を取得・設定する

// 対象の要素を取得（ここではルート要素）
const root = document.documentElement;

// 1. CSS変数の値を取得する
// getComputedStyleを使って、計算済みのスタイルから値を取り出します
const mainColor = getComputedStyle(root).getPropertyValue('--main-color').trim();
console.log(mainColor); // 出力例: #e67e22

// 2. CSS変数の値を変更する
// setPropertyを使って新しい値をセットします
root.style.setProperty('--main-color', '#2ecc71');

コードの解説

取得: getComputedStyle(element).getPropertyValue('--変数名') を使用します。取得した値には余分な空白が含まれることがあるため、.trim() で除去するのが無難です。
設定: element.style.setProperty('--変数名', '値') を使用します。

この仕組みを使えば、カラーピッカーでユーザーが選んだ色を即座にサイト全体に反映させるといった機能も簡単に実装できます。