CSS変数（カスタムプロパティ）
色やサイズを1箇所で管理できる「CSS変数（カスタムプロパティ）」の書き方と使いどころを学びます。
同じ色を何箇所にも書く問題
前回までのレッスンで、CSSリセットとベーススタイルを学びました。 次は色の管理について考えてみましょう。
例えば、サイトの背景色に #ffffff、文字色に #171717 を使うとします。
body {
background-color: #ffffff;
color: #171717;
}
.card {
background-color: #ffffff;
border: 1px solid #171717;
}
.footer {
background-color: #ffffff;
color: #171717;
}同じ色コードが何度も繰り返されています。もし背景色を #f5f5f5 に変えたくなったら、
すべての #ffffff を探して書き換えなければいけません。
- 変更箇所が多く、修正漏れが起きやすい
- どの
#ffffffが「背景色」で、どの#ffffffが別の用途なのか区別がつかない
この問題を解決するのがCSS変数です。
CSS変数で「名前をつけて管理する」
CSS変数（カスタムプロパティ）を使うと、値に名前をつけて1箇所で管理できます。
:root {
--background: #ffffff;
--text: #171717;
}定義した変数は var() で呼び出します。
body {
background-color: var(--background);
color: var(--text);
}構文はシンプルです。
| 構文 | 役割 | 例 |
|---|---|---|
| --変数名: 値; | 変数を定義する | --background: #ffffff; |
| var(--変数名) | 変数を使う | background-color: var(--background); |
先ほどの繰り返しだらけのコードを、CSS変数で書き直してみましょう。
--background の値を :root で1箇所変えるだけで、.page、.card、.footer すべてに反映されます。
エディタで --background の値などを変えてみてください。（#f0f9ffなど）
:root に書くのはなぜ？
CSS変数はどのの中でも定義できます。しかし、グローバルCSSでは :root に書くのが定番です。
/* :root = HTML文書のルート要素（html要素）*/
:root {
--background: #ffffff;
--text: #171717;
}:root はページ全体の最上位要素です。ここで定義した変数は、子孫であるすべての要素から var() で参照できます。
| 定義する場所 | 変数が使える範囲 |
|---|---|
| :root | ページ全体（すべての要素） |
| .card | .card とその子要素だけ |
サイト全体で使う色やサイズは :root に定義する。特定のコンポーネントだけで使う変数はその内に定義する。この使い分けが基本です。
:root と html はほぼ同じ要素を指しますが、:root は疑似クラスのため詳細度がわずかに高くなります。
レッスン2で学んだ詳細度を思い出してみましょう。
| 種類 | 詳細度 | |
|---|---|---|
| :root | 疑似クラスセレクタ | classと同等 |
| html | 要素 | 最も低い |
グローバルCSSで :root が好まれるのは、「ここがサイト全体の変数定義である」という共通認識がエンジニア間にあるためです。
変数を使ってベーススタイルに色を追加しよう
前回のレッスンで、ベーススタイルに font-family と line-height を定義しました。
/* 2. ベーススタイル */
body {
font-family: system-ui, sans-serif;
line-height: 1.6;
}CSS変数を組み合わせると、ここに背景色と文字色も追加できます。
/* 3. デザイントークン（CSS変数） */
:root {
--background: #ffffff;
--text: #171717;
}
/* 2. ベーススタイル */
body {
font-family: system-ui, sans-serif;
line-height: 1.6;
background-color: var(--background);
color: var(--text);
}色の値は :root のCSS変数で管理し、適用先は body のベーススタイルで指定する。役割を分けることで、色を変更したいときは :root だけを見ればよくなります。
変数の名前は、色そのもの（--blue、--white）ではなく役割（--background、--text、--primary）でつけるのがおすすめです。
/* 避けたい命名 */
:root {
--white: #ffffff;
--dark-gray: #171717;
}
/* おすすめの命名 */
:root {
--background: #ffffff;
--text: #171717;
}--white だと、将来ダークモードで背景を黒にしたとき --white: #171717; という矛盾した定義になってしまいます。役割で名前をつけておけば、値が変わっても名前が意味を失いません。
構成の概要を振り返ろう
ここまでのレッスンで、構成の概要の3番目まで理解できました。
/* 1. CSSリセット */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* 2. ベーススタイル */
body { font-family: system-ui, sans-serif; line-height: 1.6; }
/* 3. デザイントークン（CSS変数） */
:root { --background: #ffffff; --text: #171717; }
/* 4. ダークモードの色定義 */
.dark { --background: #171717; --text: #ffffff; }
/* 5. レスポンシブなサイズ定義 */
h1 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }/* 1. CSSリセット ✅ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* 2. ベーススタイル ✅ */
body { font-family: system-ui, sans-serif; line-height: 1.6; }
/* 3. デザイントークン（CSS変数） ✅ */
:root { --background: #ffffff; --text: #171717; }次のステップ
CSS変数で色を1箇所で管理できるようになりましたね。もし、:root に定義した変数の値だけを別のセットに切り替えたら、何が起きるでしょうか？
次のレッスンでは、CSS変数を活用したダークモードの仕組みを学びます。