CSSの世界へようこそ！フロントエンドの現場で長年戦ってきた私が、今日はずっと「なんだか難しそうだな…」と敬遠されがちな、CSSの「リセット魔法」についてお話しします。
CSSを書いていると、「あぁ、親から引き継いだこのスタイル、今は邪魔だな！ 一旦真っ白に戻したい！」って思うこと、ありますよね？ そんな時に頼りになるのが `initial`, `unset`, `revert`, `revert-layer` という4つのキーワードです。
これらを使いこなせると、CSSの「上書き合戦」から卒業して、もっと身軽にスタイルを操れるようになりますよ。さあ、一緒に紐解いていきましょう。
—
1. CSSを「お買い物」に例えてみよう
まず、CSSの仕組みを「お買い物」に例えてみましょう。
ブラウザは、あなたが書いたCSSを「お店のルール」として読み込みます。
- ブラウザのデフォルト設定: お店が最初から用意している「基本の棚」。
- あなたが書いたCSS: あなたが後から持ち込んだ「自分専用のタグ」。
通常、あなたが書いたCSSは、お店の棚にあるデフォルトの値を「上書き」します。でも、「やっぱりデフォルトに戻したい」「親のスタイルを忘れてリセットしたい」という時、この4つのキーワードが活躍します。
—
2. 4つの魔法のキーワードを解説
① `initial`：生まれたての姿に戻す
「何にも染まっていない、純粋な初期状態」に戻す魔法です。
例えば、文字を赤くしても、`color: initial;` を使うと、ブラウザが元々持っている「文字は黒」というデフォルトの状態へ強制的に戻されます。
② `unset`：親の顔色をうかがう
これが一番便利かもしれません。「もし親がそのスタイルを持っていたら親に従い、もし親が何も設定していなければ初期値に戻る」という、非常に柔軟なやつです。迷ったらまずはこれを試すのが、現場の知恵です。
③ `revert`：お店の「基本ルール」に戻す
ブラウザには、最初から決まっている「見出しなら太くする」「リンクなら青くする」といった基本ルールがありますよね。`revert` は、あなたが後から付け足したスタイルを「なかったこと」にして、ブラウザが本来持っている基本スタイルまで巻き戻します。
④ `revert-layer`：レイヤー（階層）を遡る
これは少し上級者向け。CSSの `@layer` という機能を使っている時に、「今のレイヤーの適用を解除して、一つ前のレイヤーに戻る」という操作です。複雑な大規模開発ではこれがないと泣きたくなるほど重要です。
—
3. 実践！コードで見てみよう
実際にどう動くのか、エディタに貼り付けて試してみてください。
/ 比較用の親要素 /
.container {
color: blue;
font-weight: bold;
}
/ 子要素に適用 /
.child {
/ 親の「青」を引き継いでいる状態 /
/ 1. initial: ブラウザの基本設定（黒）に戻る /
color: initial;
/ 2. unset: 親が設定していなければ初期値へ、あれば親に従う /
font-weight: unset;
}
/ 3. revert: ブラウザのデフォルトのスタイル（h1なら太字など）に戻す /
.reset-me {
color: revert;
}
—
4. なぜこれが「現場の知恵」なのか？
初心者の方は、よく `!important` を使って無理やりスタイルをねじ伏せようとします。でも、`!important` は「CSSの爆弾」です。一度使うと、後から修正するのがとてつもなく大変になります。
今回紹介したキーワードたちは、いわば「整理整頓の道具」です。
「ねじ伏せる」のではなく「本来の状態に戻してあげる」という考え方は、メンテナンス性が高く、チームで開発する時にも非常に喜ばれます。「あ、この人はCSSの引き際を知っているな」と思ってもらえるはずです。
—
最後に：つまずいても大丈夫
「`initial` と `revert`、どっちを使えばいいの？」と迷うこともあるでしょう。それでいいんです。最初は誰だって混乱します。
まずは、「`unset` を使ってみる」ことから始めてみてください。もしうまくいかなかったら、それは「ブラウザの基本設定が邪魔をしているんだな」と気づくチャンスです。その時こそ、`revert` の出番です。
CSSは、あなたの思い通りにデザインを形にするための優しいツールです。焦らず、少しずつ実験しながら、この「リセットの魔法」を楽しんでみてくださいね。応援しています！
コメント