概要
CSSが本格的に“設計”の領域に進化し始めたのは、**カスタムプロパティ（CSS変数）**が登場してからだ。
単なる色指定やマージンの定数化ではない。
スタイルの「意味」と「関係性」を抽象化し、制御可能にする手段としてのCSS変数は、現代のフロントエンド設計に欠かせない。
この記事では、CSS変数の構文・スコープ・使い所・計算式への応用・テーマ切り替え対応まで、設計視点で使いこなすためのノウハウを凝縮して解説する。
対象環境
CSS Custom Properties（CSS Variables）対応ブラウザ
（IEを除く主要ブラウザすべて）
基本構文
:root {
--primary-color: #007aff;
--spacing-unit: 1rem;
}
.button {
background: var(--primary-color);
margin-bottom: var(--spacing-unit);
}
-
--変数名で定義 -
var(--変数名)で参照 -
:rootはグローバルスコープ（CSS全体に適用）
スコープ（継承）を意識した設計
.card {
--card-padding: 1.5rem;
padding: var(--card-padding);
}
.card-small {
--card-padding: 0.75rem;
}
→ 親にスコープを限定することで、コンポーネントごとの微調整が可能
デフォルト値の指定（フォールバック対応）
color: var(--headline-color, #333);
→ 変数が未定義の場合は #333 を使用
→ フェイルセーフで堅牢なスタイル
計算と連携：calc() と組み合わせてダイナミックに
:root {
--base-size: 1rem;
}
.box {
padding: calc(var(--base-size) * 2);
font-size: calc(var(--base-size) + 0.5rem);
}
→ 数式に組み込むことで、設計の一貫性を保ったまま柔軟なUIが構築可能
状態切り替え：ダークモードやテーマ変更への応用
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #e0e0e0;
}
<body data-theme="dark">
<div class="container">Dark Theme Active</div>
</body>
→ 属性切り替えで全体テーマの即時切り替えが可能に。JavaScriptも不要。
実務例：ユーティリティ変数セットの構築
:root {
/* カラー */
--color-primary: #007aff;
--color-danger: #ff3b30;
/* タイポグラフィ */
--font-base: 1rem;
--font-heading: 1.5rem;
/* スペーシング */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
}
→ このような「設計ルール」を変数で抽象化することで、コードの意味が伝わり、変更にも強くなる
よくあるミスと対策
❌ SCSSの変数と混同する
$primary-color: #007aff;
→ CSS変数とは別物。SCSS変数は事前にコンパイルされるが、CSS変数はランタイムで評価される。
→ ✅ 使い分けるポイント：
- SCSS → 計算やミックスインの補助
- CSS変数 → DOMスコープと状態に応じた柔軟な変更
❌ IE対応が必要な場合に使ってしまう
→ IEはCSS変数を一切サポートしない。プロダクト要件に応じてPolyfillやSCSSにフォールバックすべき
結語
CSS変数は、単なる見た目の定数化にとどまらない。
それはスタイルの意味と構造をコード化し、再利用とスケーラビリティを担保するための言語的な機能である。
見た目を変えるだけでなく、意味を抽象化して操作できるという点で、CSSは進化している。
設計の主語を「色」から「意味」に。
CSS変数はその最初の一歩となる。