CSSの世界へようこそ！フロントエンドの最前線でコードを書き続けてきた私から、今日は皆さんが必ず一度は頭を抱える「CSS変数の魔法」についてお話ししますね。
CSSを学び始めると、最初は「書いた通りに色がついて嬉しい！」という状態から、すぐに「あれ、なんでこの色が反映されないの？」という迷路に迷い込むものです。大丈夫、それはあなたが一生懸命にCSSと向き合っている証拠です。
今日は、その迷路を解くための「CSS変数の継承と優先順位」という強力な武器を授けますね。
—
そもそも「CSS変数」って何？
CSS変数（カスタムプロパティ）は、いわば「名前付きの引き出し」です。
普通、CSSで色を指定するときは、「このボタンは赤、この文字も赤、この枠線も赤」と一つずつ指定しますよね。でも、もし「赤」が「オレンジ」に変わったら？全部書き直すのは地獄です。
そこで、「`–main-color: red;`」という引き出しを作っておき、使いたい場所で「この引き出しの中身を使って！」と指示するんです。これがCSS変数です。
—
変数は「家族のバトン」のように継承される
CSS変数の面白いところは、「親から子へ、自動的に受け継がれる」という性質です。これを「継承」と呼びます。
例えば、家計のお小遣いを想像してみてください。
お父さん（親要素）が決めたルールは、子供（子要素）も自動的に受け継ぎますよね？
/ ルート（家全体）の設定 /
:root {
–primary-color: blue; / お父さんが決めた「我が家のテーマカラーは青！」 /
}
/ 子要素（子供の部屋） /
.child {
/ ここでは何も指定しなくても、自動的に青がやってくる /
color: var(–primary-color);
}
この「引き出し」は、階層が深ければ深いほど、どんどん下へ下へと受け継がれていきます。これがCSS変数の基本の姿です。
—
「お小遣いの書き換え」：スコープによる優先順位
さて、ここからが本題です。もし「子供の部屋だけは赤がいい！」と言い出したらどうなるでしょうか？
CSSでは、「より近くで定義された値が優先される」という鉄則があります。これを「スコープ（適用範囲）」と呼びます。
:root {
–theme-color: blue; / 全体は青 /
}
.special-box {
–theme-color: red; / ここで「この箱の中だけは赤だよ！」と上書き /
}
.box {
color: var(–theme-color);
}
このように、`.special-box`の中で新しい値を定義すると、その箱の中にあるすべての要素は「青」ではなく「赤」を優先して読み取ります。これは、お父さんのルールよりも、自分の部屋のルールを優先するようなものですね。
重要なポイント：詳細度は関係ない？
ここが一番つまずきやすいところです。CSS変数の値の決定には、CSSの「詳細度（セレクタの強さ）」は関係ありません。
通常のCSSプロパティなら「`#id`で書いたほうが強い」というルールがありますが、変数はあくまで「どの箱（スコープ）で定義されているか」だけで決まります。これが「変数は直感的で扱いやすい」と言われる理由です。
—
もし「!important」を使ったらどうなるの？
CSSで最強の魔法「`!important`」ですが、CSS変数で使うときには少し注意が必要です。
.box {
–theme-color: red !important; / これはエラーにはならないけど、効かない /
}
実は、CSS変数の値の定義に `!important` は使えません。
変数の値は、あくまで「その場所で何が定義されているか（スコープ）」で決まるので、強引に力を増すことはできないのです。
「どうしてもこの色を強制したい！」という時は、変数に頼るのではなく、変数を使っているプロパティ側で `!important` を使いましょう。
.box {
color: var(–theme-color) !important; / これなら効く！ /
}
—
最後に：CSS変数とうまく付き合うコツ
CSS変数は、コードを読みやすく、管理しやすくする最高のパートナーです。
1. まずは `:root` に全体で使う色やフォントを定義する。
2. 特定のパーツだけ変えたいときは、そのパーツのクラス内で変数を再定義する。
3. 詳細度（#idや.class）で悩む前に、まずは「どこで変数を定義したか」を確認する。
最初は難しく感じるかもしれませんが、CSS変数は「引き出し」だと考えれば、ぐっと身近に感じられるはずです。
もしコードが思い通りに動かなくても、それはCSSがあなたに「もう少し整理整頓しようよ！」と優しく教えてくれているだけです。一つずつ紐解いていけば、必ず思い通りのデザインが作れるようになりますよ。
さあ、エディタを開いて、あなただけの「引き出し」を作ってみませんか？応援しています！
コメント