Webサイトを作り終わった後、こんな修正依頼が来たらどう思いますか？
「このサイトのテーマカラーの『水色』だけど、やっぱり全部『ピンク』に変えてくれない？」
もしCSS変数を使っていなければ、何百行もあるCSSの中から色コード（#00bcd4など）を探し出し、一つ一つ書き換えなければなりません。
これはまさに修正地獄です。
しかし、「CSS変数（カスタムプロパティ）」を使っていれば、たった1箇所書き換えるだけで、サイト全体の色が一瞬で変わります。
今回は、未来の自分を救うための「賢いCSSの書き方」を学びましょう。
CSS変数って何？
数学の「x = 10」と同じで、「ある値に名前をつけて保存しておく箱」のことです。
一度箱を作ってしまえば、あとはその「箱の名前」を呼び出すだけで使い回せます。
書き方のルール
- 宣言（箱を作る）：
--（ハイフン2つ）で始めます。例：--main-color - 使用（箱を使う）：
var()で囲みます。例：var(--main-color)
実践：色を一括管理してみよう
変数はどこにでも定義できますが、サイト全体で使いたい場合は :root という特別な場所に書くのが鉄則です。
/* 1. まず「:root」で変数を定義する */
:root {
/* テーマカラーを定義 */
--main-color: #00bcd4; /* メインの水色 */
--text-color: #333333; /* 文字のグレー */
--bg-color: #f0f0f0; /* 背景の薄いグレー */
}
/* 2. 定義した変数を使う */
body {
background-color: var(--bg-color); /* #f0f0f0 になる */
color: var(--text-color); /* #333333 になる */
}
h1 {
color: var(--main-color); /* #00bcd4 になる */
border-bottom: 2px solid var(--main-color);
}
button {
background-color: var(--main-color);
}こうしておけば、もし「色をピンクにしたい！」と言われても、:root の中の --main-color を書き換えるだけで、h1もボタンも全てピンクに変わります。
色だけじゃない！便利な使い方
変数に入れられるのは色コードだけではありません。
サイズや余白、フォント名なども管理できます。
:root {
--content-width: 1000px; /* サイトの最大幅 */
--base-spacing: 20px; /* 基本の余白サイズ */
}
.container {
max-width: var(--content-width);
padding: var(--base-spacing);
}
.card {
margin-bottom: var(--base-spacing);
}「余白をもう少し広げたいな」と思った時も、--base-spacing を変えるだけでサイト全体のバランスを一気に調整できます。
【応用】ダークモード実装への布石
今どきのWebサイトやアプリでよく見る「ダークモード」。
これもCSS変数を使えば簡単に作れます。
「メディアクエリ（スマホ対応で使ったやつ）」を使って、変数の中身だけを入れ替えるのです。
/* デフォルト（ライトモード） */
:root {
--bg-color: white;
--text-color: black;
}
/* ユーザーの端末が「ダークモード」設定の時 */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a; /* 背景を黒く上書き */
--text-color: white; /* 文字を白く上書き */
}
}
/* 使う側は何も変えなくていい！ */
body {
background-color: var(--bg-color);
color: var(--text-color);
}これだけで、OSの設定に合わせて自動で色が切り替わるサイトが作れます。
変数の凄さが分かりましたか？
まとめ：プロは「変更」に備える
初心者は「今、表示されればいい」と考えがちですが、プロは「後で変更があっても楽なように」と考えます。
- よく使う色は
:rootで変数にする。 - 共通のサイズも変数にしておく。
この習慣をつけるだけで、あなたのコードの品質（保守性）はグッと上がります。
次のプロジェクトからは、ぜひCSSの冒頭に :root を書く癖をつけてみてください！