CSSの色を一括管理！CSS変数（カスタムプロパティ）の使い方｜var・:rootの基本と実践

「色を変えたいだけなのに、同じコードを何ヶ所も修正…」

こんな非効率なCSS管理をしていませんか。

CSS変数（カスタムプロパティ）を使えば、一箇所の変更だけでサイト全体に反映できます。しかも、最近はダークモードやテーマ切り替えにも必須の技術です。

この記事では、初心者でも迷わないように

• 基本の使い方（:root・var）
• 実務で使えるパターン
• 効かない原因と対処法

までまとめて解説します。

【結論】CSS変数はこれだけ覚えればOK

1. :rootで定義する
2. var()で呼び出す

:root {
  --color-primary: #3498db;
}

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

この2つだけでOKです。

CSSの基本的な書き方については、以下の記事でも詳しく解説しています。

CSS変数（カスタムプロパティ）の使い方【varと:rootの基本】

CSS変数は、値を名前で管理して再利用できる仕組みです。色やサイズをまとめて管理できるため、修正が一瞬で終わります。

宣言方法（–から始める）

--font-size: 16px;
--spacing: 8px;

• –で始めて、: の後に値を書く

CSS変数のスコープ（:rootとローカルの違い）

:root

:root ではサイト全体で使用できます。

:root {
  --color: red;
}

特定のセレクタ内

この例では .card の中だけ有効です。

.card {
  --color: blue;
}

→ CSSセレクタの調べ方はこちら

var()の使い方と注意点

CSS変数は var() を使って呼び出します。

color: var(--main-color);

• 必ず var() が必要（そのまま –color は使えない）
• 変数名は完全一致が必要

CSS変数（カスタムプロパティ）の実践例

CSS変数の実践的な使い方を見ていきます。

カラーを一括管理する（テーマカラー）

:root {
  --color-primary: #3498db;
  --color-accent: #e74c3c;
}

デザイン（カラー）変更が爆速です。

余白・サイズを統一する

:root {
  --space-sm: 8px;
  --space-md: 16px;
}

ボタン・ボックスのデザインを共通化

:root {
  --radius: 8px;
}

.button {
  border-radius: var(--radius);
}

このようにしておくと、

• 角丸を変えたい
• ボックスの余白を調整したい

といったときも、変数を1箇所変更するだけで統一して変更できます。

サイト幅・レイアウトを管理する

レイアウト変更も一括です。

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

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

margin: 0 auto; を使うと、要素を中央に配置できます。中央寄せの詳しい方法はこちらの記事でまとめています。

CSS変数の設計方法

おすすめの命名ルール（color / space / radius）

--color-primary
--space-md
--radius-sm

→ 意味ベースで命名するのがコツ

デザイントークン的な考え方

--color-primary
--color-primary-hover
--color-bg

→ デザインルールを「変数化」

CSS変数の応用テクニック

フォールバック（var(–color, #333)）

ブラウザや環境によってCSS変数が未定義になる場合や、後から変数を追加する設計に備えてフォールバックを入れておくと安全です。

color: var(--text-color, #333);

この例では、–text-colorが未定義の場合デフォルト値#333が適用されます。

calc・clampと組み合わせる

width: calc(var(--space-md) * 2);

ダークモード対応（:root切り替え）

:root {
  --bg: #fff;
}
.dark {
  --bg: #222;
}

→ クラス切り替えでテーマ変更

CSS変数が効かない原因と対処法

CSS変数（カスタムプロパティ）が反映されない場合、多くは「スコープ・記述ミス・キャッシュ」が原因です。

:rootに書いていないケース

.container {
  --main-color: red;
}

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

この場合、container外では使えません。

対処法

サイト全体で使うCSS変数は、:root に書きます。

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

スペルミス

CSS変数は、完全一致が必要です。

:root {
  --main-color: blue;
}
button {
  background: var(--maincolor);
}
/* --main-color と --maincolor は別物 */

キャッシュ問題

CSSを直しても反映されない場合は以下を確認します。

• Ctrl + F5（強制更新）
• シークレットモード
• キャッシュ系プラグイン

まとめ｜CSS変数（カスタムプロパティ）で効率的なスタイル管理を

ブログやサイトのデザインをカスタマイズする場合は、早い段階からCSS変数を使う設計にしておくと、後からのデザイン変更にも柔軟に対応できるようになります。

CSSカスタマイズを進めるなら、以下の記事もあわせて読むと理解が深まります。

• CSSの書き方とカスタマイズ方法【基本】
• WordPress「追加CSSクラス」の使い方【特定ブロックだけ変更】
• CSSが効かない・反映されない原因と対処法【トラブル対策】

→ CSSやPHPを編集する前に、バックアップを取っておくと安全です。