Webサイトを運用していると、
「色を変えたいだけなのに、CSSを何十箇所も直さないといけない…」
「どこで指定しているのか分からず、修正に時間がかかる…」
こんな経験はありませんか？

そんな“CSSあるある”を一気に解消してくれるのが :root を使った変数管理。

今回は、なぜ :root を使うと“壊れにくいCSS”になるのか、その理由と使い方をわかりやすく紹介します。

:rootとは

:root は、CSSの一番上の階層にある「全体共通の変数を置く場所」のこと。つまり、サイト全体で使いまわせる設定をまとめておく場所です。

ここに色やフォントサイズなどをまとめておけば、どこからでも名前で呼び出せるようになります。

:rootの書き方

コードはシンプルです。

：root {
--main-color: #0a84ff;
--sub-color: #f5f5f7;
--radius: 12px;
--space-m: 1.2rem;
}

必ず先頭に「- -」を付けて、［- -main-color］や［- -sub-color］のように任意で名前を決めることができます。

このように“よく使う値”を変数として定義しておくと、サイト全体のデザインをひとつの場所で管理できるようになります。

呼び出しはvar()でOK

定義した変数は、どこからでもvar()で呼び出せます。

button {
background: var(--main-color);
border-radius: var(--radius);
padding: var(--space-m);
}

たとえば、ボタンの背景色を変えたいときも、:rootの変数の値を1箇所書き換えるだけで全ページ反映されるという仕組みです。

なぜ“壊れにくいCSS”になるのか？

修正箇所が1つで済む

値が散らばらないので、メンテ時の事故（書き忘れ・書き漏れ）が激減。

命名ルールで読みやすいコードに

その値が何のためのものか一目で分かるため、数ヶ月後に自分で見返しても理解しやすい。

テーマ切り替えに強い

ライト／ダークテーマも、変数の値を上書きだけで実現できます。

:root {
--main-color: #1c1c1e;
--sub-color: #ffffff;
}

.dark {
--main-color: #ffffff;
--sub-color: #1c1c1e;
}

まとめ

複雑なCSSを書き換えなくても、変数の値だけを切り替えればデザインを変更できるのが最大の強みです。

このように、:rootに変数をまとめておくと、デザイン変更がとてもスムーズになります。ぜひ:rootの変数管理を活用してみてください。