CSS変数の使い方とは？var()で色や余白をまとめて管理する方法を解説

CSS変数は、色・余白・文字サイズなどの値をまとめて管理し、var()で呼び出して使うための仕組みです。CSSを書いていると、同じ色や余白を何度も指定する場面があります。たとえば、ボタン、見出し、リンク、カードの枠線に同じメインカラーを使っている場合、あとから色を変えるだけでも複数箇所を修正しなければならない経験はありませんか？そんなときに便利なのがCSS変数です。よく使う色や余白に名前を付けておけば、必要な場所で呼び出して使い回せます。

この記事では、初心者の方に向けて、基本の書き方から実装例、効かないときの確認ポイントまで解説します。

CSS変数とは？

CSS変数とは、CSSの中で繰り返し使う値に名前を付けて管理できる機能です。

:root {
  --main-color: #0068b7;
}

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

この例では、--main-colorという名前で色を定義し、var(--main-color)で呼び出しています。

CSS変数の正式な仕様名は「カスタムプロパティ」ですが、この記事では初心者向けに「CSS変数」として使い方を中心に解説します。

CSS変数の基本構文

CSS変数は、定義するときと使うときで書き方が違います。

定義するときは–名前で書く

CSS変数を作るときは、名前の先頭にハイフンを2つ付けます。

:root {
  --text-color: #222222;
  --accent-color: #e95420;
  --base-space: 16px;
}

ハイフンが1つだけだとCSS変数として認識されません。必ず--名前の形で書きましょう。

使うときはvar()で呼び出す

定義したCSS変数は、そのまま値として書くのではなく、var()で呼び出します。

.text {
  color: --text-color;
}

.text {
  color: var(--text-color);
}

CSS変数は「定義は--名前、使用はvar(--名前)」と覚えると迷いません。

:rootに共通値を置く理由

サイト全体で使う色や余白は、:rootにまとめて定義するのが基本です。

:root {
  --color-primary: #0068b7;
  --color-text: #222222;
  --color-muted: #666666;
  --color-bg: #f7f9fb;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
}

:rootに置いておくと、ページ全体のCSSから呼び出しやすくなります。初心者の方は、まず共通の色と余白を:rootにまとめるところから始めるのがおすすめです。

最初に変数化しやすい値

種類	変数名の例	用途
メインカラー	--color-primary	ボタン、リンク、見出し線
本文色	--color-text	本文や見出しの文字色
薄い文字色	--color-muted	補足文や日付
小さな余白	--space-sm	ラベルや小さな間隔
大きな余白	--space-lg	セクションやカード間

CSS変数で色を管理する方法

まずは、もっとも分かりやすい色の管理から見ていきましょう。

:root {
  --color-primary: #0068b7;
  --color-primary-dark: #004f8c;
  --color-text: #222222;
}

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

a {
  color: var(--color-primary);
}

このようにしておくと、サイト全体のメインカラーを変更したいときに、--color-primaryの値を直すだけで済みます。

ボタンの色をCSS変数で管理する

:root {
  --button-bg: #0068b7;
  --button-bg-hover: #004f8c;
  --button-text: #ffffff;
}

.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--button-bg);
  color: var(--button-text);
  text-decoration: none;
  border-radius: 6px;
}

.button:hover {
  background-color: var(--button-bg-hover);
}

ボタンの通常色とホバー色を変数にしておくと、ブランドカラーの変更にも対応しやすくなります。

色を直接あちこちに書くと、後から色変更するときに修正漏れが起きやすくなります。繰り返し使う色はCSS変数にまとめましょう。

CSS変数で余白を管理する方法

余白もCSS変数と相性が良い値です。

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
}

このように余白の段階を決めておくと、ページ全体の余白感が揃いやすくなります。

.section {
  padding: var(--space-xl) var(--space-md);
}

.card {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

毎回13pxや27pxのような細かい値を使うより、sm、md、lgのような段階で管理する方が、デザインに統一感が出ます。

【応用テク】calc()関数と組み合わせて余白を計算する

実務のコーディングでCSS変数が最も真価を発揮するのが、calc()関数と組み合わせた計算です。

たとえば、ベースとなる余白（16px）を一つ定義しておき、要素に応じて「2倍の余白」「半分の余白」にしたい場合、新しく変数を増やさなくても以下のように1行で計算できます。

:root {
  --base-space: 16px; /* ベースの余白 */
}

.card {
  /* 16px × 2 ＝ 32px の余白になる */
  padding: calc(var(--base-space) * 2);
}

.card-title {
  /* 16px ÷ 2 ＝ 8px の余白になる */
  margin-bottom: calc(var(--base-space) / 2);
}

clamp()と組み合わせてレスポンシブな余白にする

CSS変数には、固定値だけでなくclamp()のようなCSS関数も入れられます。

:root {
  --section-space: clamp(48px, 8vw, 120px);
}

.section {
  padding-block: var(--section-space);
}

スマホでは余白を抑え、PCではゆったりした余白にできます。

CSS変数で文字サイズを管理する方法

文字サイズも変数化できます。特に見出しや補足文など、複数箇所で使うサイズに向いています。

:root {
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-title: 1.75rem;
}

body {
  font-size: var(--font-size-base);
}

.note {
  font-size: var(--font-size-small);
}

.section-title {
  font-size: var(--font-size-title);
}

ただし、文字サイズは読みやすさに直結します。すべてを変数化するより、よく使うサイズだけをまとめる方が扱いやすいです。

カードでCSS変数を使う実装例

CSS変数は、カードのような部品でも便利です。

<div class="card">
  <h3>通常カード</h3>
  <p>本文が入ります。</p>
</div>

<div class="card card--accent">
  <h3>強調カード</h3>
  <p>本文が入ります。</p>
</div>

.card {
  --card-border: #dddddd;
  --card-bg: #ffffff;

  padding: 24px;
  border: 1px solid var(--card-border);
  background-color: var(--card-bg);
}

.card--accent {
  --card-border: #0068b7;
  --card-bg: #e8f4fb;
}

通常カードと強調カードで同じCSSを使いながら、色だけを切り替えられます。

var()のフォールバックを設定する方法

var()には、CSS変数が見つからなかったときの代替値を指定できます。

.text {
  color: var(--text-color, #333333);
}

この例では、--text-colorが定義されていない場合に#333333が使われます。

フォールバックが役立つ場面

フォールバックは、複数人でCSSを触るときや、ページごとに一部の変数だけを上書きする場合に役立ちます。

.alert {
  border-color: var(--alert-color, #e95420);
}

フォールバックは保険として便利ですが、変数名のミスを隠してしまうこともあります。効かないときは変数名も確認しましょう。

CSS変数の命名ルール

CSS変数は自由に名前を付けられますが、実務ではルールを決めた方が管理しやすくなります。

色名より用途で名前を付ける

:root {
  --blue: #0068b7;
  --red: #e95420;
}

デザイン変更でメインカラーが青から緑に変わると、--blueという名前なのに値は緑、という分かりづらい状態になります。

:root {
  --color-primary: #0068b7;
  --color-danger: #e95420;
  --color-text-main: #222222;
  --color-text-muted: #666666;
}

CSS変数の名前は、色そのものではなく「何に使う値なのか」で付けると、変更に強くなります。

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

CSS変数が反映されないときは、次のポイントを確認しましょう。

原因1：変数名が一致していない

CSS変数名は大文字と小文字を区別します。

:root {
  --MainColor: #0068b7;
}

.button {
  background-color: var(--maincolor);
}

この例では、--MainColorと--maincolorが別名として扱われるため、反映されません。

原因2：var()を書き忘れている

CSS変数を使うときは、必ずvar()が必要です。

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

原因3：定義場所（スコープ）が合っていない

CSS変数には、どこからでも呼び出せる「グローバル変数」と、特定の場所でしか使えない「ローカル変数」という有効範囲（スコープ）の概念があります。

:root 以外の場所で定義した変数は、その要素の中（および子要素）でしか使えません。定義する場所を間違えていると、var() で呼び出しても値が適用されなくなります。

変数の種類	定義する場所	有効範囲（スコープ）
グローバル変数	:root { ... }	サイト内のすべての要素から呼び出せる（基本はこれ！）
ローカル変数	.card { ... } などの特定のクラス内	指定した要素の中（子要素）だけでしか使えない

.card {
  --card-bg: #fff; /* .card の中だけで有効なローカル変数 */
}

body {
  background-color: var(--card-bg); /* ❌ .card の外側なので効かない */
}

サイト全体で共通して使いたい色や余白は、必ず:rootに記述して「グローバル変数」として定義するよう意識しましょう。

WordPressやCocoonでCSS変数を使う場面

WordPressの追加CSSや子テーマでも、CSS変数は便利です。

たとえば、Cocoonで見出し、ボタン、関連記事枠の色をそろえたい場合、共通のアクセントカラーを作っておくと管理しやすくなります。

:root {
  --site-accent: #0068b7;
  --site-accent-light: #e8f4fb;
}

.article h2 {
  border-left: 6px solid var(--site-accent);
}

.blank-box.bb-check {
  background-color: var(--site-accent-light);
}

あとからサイトカラーを変更したいときも、--site-accentを直すだけで関連する装飾をまとめて調整できます。

記事装飾を変数化すると作業ミスを減らせる

大量の記事を作る場合、毎回同じマーカー色や注意色を書くと、少しずつ色がズレることがあります。CSS側で共通値を管理できるようにしておくと、記事装飾の統一感を保ちやすくなります。

JavaScriptからCSS変数を変更する方法

CSS変数はJavaScriptから変更できます。テーマカラーの切り替えや、管理画面のプレビュー機能などで使われます。

<button id="changeTheme">テーマを変更</button>

const button = document.getElementById("changeTheme");

button.addEventListener("click", () => {
  document.documentElement.style.setProperty("--color-primary", "#2f8f46");
});

このコードでは、ボタンを押すと:rootの--color-primaryを変更できます。

通常の記事ページではJavaScript連携を無理に使う必要はありません。テーマ切り替えなど、動的に見た目を変えたい場面で使いましょう。

CSS変数を導入するときのおすすめ手順

既存サイトにCSS変数を導入するときは、いきなりすべての値を変数化しない方が安全です。

1. メインカラー、本文色、背景色を:rootにまとめる
2. 余白をsm、md、lgのように段階化する
3. ボタンやカードなど繰り返し使う部品に適用する
4. よく使う文字サイズを変数化する
5. 重複している色指定や余白指定を少しずつ置き換える

CSS変数は、まず「色」と「余白」から導入すると効果を感じやすく、初心者でも扱いやすいです。

公式ドキュメントも確認する

CSS変数の基本を正確に確認したい場合は、公式ドキュメントも参考になります。

• MDN Web Docs: var()
• MDN Web Docs: Using CSS custom properties

まとめ：CSS変数は色や余白を管理する入門機能として便利

この記事では、CSS変数の使い方を解説しました。

CSS変数は、--名前で定義し、var(--名前)で呼び出すことで、色・余白・文字サイズを効率よく管理できます。

まずは、メインカラー、本文色、余白の3つを:rootにまとめるところから始めましょう。慣れてきたら、ボタンやカードにもCSS変数を使うと、修正しやすいCSSになります。