フロントエンド - CSS・スタイリング

CSS変数（カスタムプロパティ）しーえすえすへんすう

カスタムプロパティデザイントークンvar()テーマ切り替えカスケードCSS3

CSS変数について教えて

簡単に言うとこんな感じ！

「このサイトのメインカラーは #3b82f6 ね」って色コードをあちこちに書く代わりに、--main-color って名前をつけて一か所で管理できる仕組みだよ！変えたいときもその一か所を直すだけでOK。デザインの「共通ルール帳」みたいなものだね！

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

CSS変数（正式名称は カスタムプロパティ）とは、CSSの中で自分で名前をつけて値を再利用できる仕組みです。--primary-color: #3b82f6; のように --（ハイフン2つ） で始まる名前で定義し、var(--primary-color) という形で呼び出して使います。

従来、色やフォントサイズといった共通の値をCSSに書くとき、同じ値を何十か所にも繰り返し書く必要がありました。CSS変数を使えば、値を一か所にまとめて定義できるため、デザインの一貫性を保ちつつ、変更コストを大幅に削減できます。発注側の視点では「ブランドカラーを変更したい」「ダークモードに対応したい」といった要件が、より低コストで実現できる土台になります。

さらにCSS変数は、JavaScriptからも読み書きできるため、ユーザー操作に応じてリアルタイムにデザインを変化させるインタラクティブな表現も得意です。2024年時点で主要ブラウザのサポート率は98%以上に達しており、実務で安心して使える標準機能です。

CSS変数の基本構造

定義と参照の書き方

/* 定義：:root（ページ全体）に変数をまとめて書く */
:root {
  --color-primary: #3b82f6;
  --color-text:    #1e293b;
  --font-size-base: 16px;
  --spacing-md:    1.5rem;
}

/* 参照：var() で呼び出す */
h1 {
  color: var(--color-primary);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-md);
}

button {
  background: var(--color-primary);
  color: #fff;
}

変数の構成要素

要素	例	説明
定義	`--brand-color: #ff0000;`	`--名前: 値;` の形で記述
参照	`color: var(--brand-color);`	`var(--変数名)` で呼び出す
フォールバック	`var(--brand-color, red)`	変数が未定義のときの代替値
スコープ	`:root { }` / `.card { }`	定義した要素の配下にのみ有効

覚え方：「ハイフン2本で宣言、var()で呼び出す」

定義は -- から始まり、使うときは var() で包む

-- → 「変数ここに置きます」の目印
var() → 「ここに変数の値を入れてください」の命令

CSS変数の4つの強み

① デザイントークンとしての一元管理

デザイントークンとは、色・サイズ・余白などデザインの最小単位の値に名前をつけたものです。CSS変数はデザイントークンの置き場所として最適で、Figmaなどのデザインツールとの連携にも活用されます。

/* ブランドカラーを変えたいときはここだけ変更 */
:root {
  --color-brand:   #3b82f6;  /* ← これ1行を変えるだけ！ */
  --color-success: #10b981;
  --color-danger:  #ef4444;
  --color-warning: #f59e0b;
}

② ダークモード対応が超シンプル

:root {
  --bg:   #ffffff;
  --text: #1e293b;
}

/* ダークモード：変数を上書きするだけ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:   #0f172a;
    --text: #f1f5f9;
  }
}

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

③ スコープで局所的な上書きができる

変数はCSSのカスケード（継承の流れ） に従うため、特定のコンポーネントだけ値を変えることもできます。

/* デフォルトのカードは青 */
.card {
  --card-accent: var(--color-brand);
  border-left: 4px solid var(--card-accent);
}

/* 警告カードだけオレンジ */
.card--warning {
  --card-accent: var(--color-warning);
}

④ JavaScriptと連携してリアルタイム変更

// ユーザーが色を選んだら即座に全体に反映
const root = document.documentElement;
root.style.setProperty('--color-brand', '#e11d48');

歴史と背景

2012年頃 — W3CのCSS Working Groupが「CSS Custom Properties」の草案を提案。繰り返しの値管理という長年の課題を解決するための仕様として設計される
2014年 — Firefox 31が初めてCSS変数を実装。当初はvar-プレフィックスだったが、後に--に変更
2016年 — Chrome・Safari・Firefoxが相次いでサポート。W3CでCSS Custom Properties Level 1として勧告候補（CR）となる
2017年 — Microsoft Edgeがサポートを追加し、主要ブラウザ全てで利用可能に。実務利用が急拡大
2018〜2020年 — デザインシステムの普及（Material Design・Tailwind CSSなど）とともに、CSS変数を使ったデザイントークン管理が標準的な手法に
2021年以降 — CSS変数を活用したダークモード対応・テーマ切り替えが当たり前になり、ReactやVueなどのコンポーネント指向開発とも自然に統合されるように

SassやLessの変数との違い

CSS変数が登場する以前は、Sass（サス）やLess（レス）といったCSSプリプロセッサ（CSSを拡張する変換ツール）の変数が広く使われていました。

比較まとめ

比較項目	CSS変数	Sass変数
動的変更	✅ できる（JS連携）	❌ ビルド時に固定
ブラウザサポート	✅ 標準機能	❌ コンパイル必須
スコープ	✅ 要素ごとに有効	❌ グローバルのみ
ループ・演算	❌ 不得意	✅ 得意
学習コスト	低い	やや高い

実務の現場では「SassでロジックのあるループはSassのまま、テーマ色などの値はCSS変数で管理」という併用スタイルが主流です。

規格	内容
CSS Custom Properties for Cascading Variables Module Level 1	W3C勧告。CSS変数（カスタムプロパティ）の構文・スコープ・カスケードルールを定義
CSS Custom Properties Level 2 (Draft)	型付き変数（`@property`）や登録メカニズムの拡張仕様（策定中）