こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとCSSにうるさいおじさん…いや、チーフアーキテクトの私です。
CSSを書き始めたばかりの頃って、次から次へと出てくる謎の記号や、見慣れない英単語に圧倒されちゃいますよね。「`.`（ドッド）だの `#`（シャープ）だの、覚えることが多すぎるよ！」って、キーボードを投げ出したくなる気持ち、痛いほどよく分かります。大丈夫ですよ、最初はみんなそこを通りますから。
さて、今回はそんな数あるセレクタの中でも、少し大人びた顔をした`:root`（ルート）擬似クラスという強力な相棒についてお話しします。
「また新しいの覚えるの？」なんて身構えなくて大丈夫。実はこれ、あなたのCSSライフを劇的に楽にしてくれる、いわば「設計図のマスターキー」のようなものなんです。一緒に優しく紐解いていきましょう！
—
そもそも `:root` ってなんだろう？
直訳すると「根っこ」ですね。植物の根っこ。
Webの世界で言うと、HTMLという巨大な木の、一番一番の根本っこ、つまり大元の `` タグの場所を指し示す魔法の呪文だと思ってください。
「あれ？ わざわざ `:root` なんて書かずに、`html` って書けばいいじゃん？」
おや、鋭いですね！ その通り、CSSで `html { … }` と書いても、大元を指定することはできます。じゃあなぜ、わざわざ `:root` なんてカッコいい名前がついているのでしょうか？
ここで、ちょっと身近な例えをさせてください。
例えば、あなたが大きなお家を建てる時のことを想像してください。
リビングの壁の色、カーテンの色、キッチンのタイルの色……。これらを全部バラバラの場所にメモしていると、「やっぱり全体のテーマカラーをシックな青から温かみのあるオレンジに変えたいな」と思った時、家じゅうのメモを探して全部書き直さないといけませんよね。大変だし、絶対に塗り忘れが出てきます。
そこで、「家の設計図のいちばん最初のページ」に、こう書くんです。
「我が家のメインカラーはオレンジです！」 と。
この「設計図の最初の一ページ」こそが、CSSにおける `:root` なんです。
—
主な役割：CSS変数を一箇所にまとめる「司令塔」
現代のモダンなCSSでは、この `:root` はCSS変数（カスタムプロパティ）を定義する場所として爆発的に使われています。
言葉だけ聞くと難しそうですが、要するに「よく使う色やフォントサイズを、自分で分かりやすい名前の変数（入れ物）に入れておく場所」です。
百聞は一見にしかず、実際のコードを見てみましょう。
/ 設計図の最初に、よく使う色や設定を全部まとめて登録しちゃいます！ /
:root {
/ メインカラーを爽やかな青色に設定 /
–primary-color: #0066cc;
/ テキストの基本の色をちょっと優しい黒に設定 /
–text-main: #333333;
/ サイト全体の標準フォントサイズ /
–base-font-size: 16px;
}
どうですか？ `:root` の中だけで、色や大きさに分かりやすい名前（`–primary-color` など）をつけて定義しています。
そして、一度ここに登録しておけば、ボタンでも、見出しでも、リンクでも、サイト内の好きな場所でこの名前を呼び出すことができるんです。
/ ボタンのデザイン /
.btn {
/ さっき登録した「メインカラー」を呼び出す /
background-color: var(–primary-color);
color: #ffffff;
}
/ 本文のデザイン /
p {
/ 標準のフォントサイズと文字の色を呼び出す /
font-size: var(–base-font-size);
color: var(–text-main);
}
—
なぜ `:root` を使うと、そんなに素晴らしいの？
「わざわざ変数なんて使わずに、直接 `#0066cc` って書けばいいじゃん」って思いますよね。私も昔はそう思っていました。
でも、Webサイトを作っていて一番多い修正って何だと思いますか？
そう、「クライアントからの突然のカラー変更のご依頼」です。
「やっぱりメインの青色、もう少し落ち着いた緑色に変えられますか？」
もしあなたが、サイト内の何百個もあるボタンや見出しに、直接 `#0066cc` と書き込んでいたら……？ 想像するだけで冷や汗が出ますよね。Ctrl + F で置換しまくって、変なところまで変わっちゃって大パニック、なんていうのは現場あるあるの悲劇です。
ここで `:root` の出番です。
もし `:root` で変数をまとめていれば、修正はたった1箇所を書き換えるだけで完了します。
:root {
/ 青色(#0066cc)から、落ち着いた緑色(#2e8b57)へ一発変更！ /
–primary-color: #2e8b57;
}
これだけで、サイト全体のボタンやアクセントカラーが、一瞬にしてすべて緑色に生まれ変わります。すごい魔法のようでしょ？ これが、プロの現場で `:root` とCSS変数が愛され続ける理由なんです。
—
現場のプロからのちょっとしたアドバイス（つまずきポイントの回避）
ここで、CSSを触り始めたばかりの方がよく引っかかるポイントをこっそりシェアしておきますね。
1. 変数の名前は `–（ハイフン2つ）` から始めよう
CSS変数を定義するときは、必ず `–`（ダッシュ2つ）を頭につけるお約束になっています。`–my-color` はOKですが、`-my-color` や `my-color` だとCSSが「どれのこと？？」と迷子になってしまいます。
2. 迷ったらとりあえず `:root` に色を突っ込んでおけ！
サイトを作り始める前、あるいはデザインカンプ（見本）を見たときに、「この色が何度も使われそうだな」と思ったものは、とりあえず `:root` に変数として登録する癖をつけましょう。後々の自分が絶対に助けてくれます。
—
おわりに
`:root` 擬似クラス、そしてCSS変数。
最初は「なんだかルールが増えて面倒だな」と感じるかもしれませんが、使いこなせるようになると、あなたのコーディングスピードとコードの美しさは見違えるように変わります。
最初は小さなWebページを作るだけでも構いません。ぜひ、あなたの書くCSSの最初の一行に `:root` を書いて、自分だけの「色の司令塔」を作ってみてくださいね。
もし途中で分からなくなったり、コードが動かなくなったりしても、大丈夫。一歩ずつ、楽しみながら進んでいきましょう！ あなたのWeb制作の旅を、影ながら応援しています。
コメント