こんにちは。CSSの世界へようこそ。
CSSを触り始めたばかりの頃、「あれ？なんでこの色は変わらないんだろう？」「さっき設定したはずなのに、また元に戻っちゃった！」なんて経験、一度はありますよね。
大丈夫です。それはあなたがCSSの才能がないからではなく、CSSという言語が持つ「ある独特のルール」を知らなかっただけ。今日は、そのモヤモヤをスッキリ解消して、CSSの「親子関係」と「優先順位」という、いわば魔法の仕組みを解き明かしていきましょう。
—
親から子へ受け継がれる「おさがり」の魔法（プロパティの継承）
CSSには、「親要素に設定したことは、子要素にも自動的に引き継がれる」という素敵なルールがあります。これを「継承（けいしょう）」と呼びます。
例えば、家系図を想像してみてください。おじいちゃんからお父さんへ、お父さんから子どもへ、顔立ちや性格が受け継がれていくようなイメージです。
継承されるものと、されないもの
CSSのすべてが継承されるわけではありません。実はここが最初のつまずきポイントです。
- 継承されるもの： 文字の色（color）、フォントの種類（font-family）、文字の大きさ（font-size）など、「文字」に関するものが多いです。
- 継承されないもの： 枠線（border）、余白（margin, padding）、背景色（background-color）など、「箱」そのものの形状に関するものは、残念ながら引き継がれません。
「なんで余白は継承されないの？」と思うかもしれません。でも、もしすべての箱が親と同じ余白を持ってしまったら、画面中が同じサイズの箱だらけになって、レイアウトが崩壊してしまいますよね。CSSは、Webサイトという家を建てるための、実はとてもバランス感覚の良いルールなんです。
—
「誰が一番エライ？」詳細度のルール
さて、ここからがCSSの腕の見せ所。「継承」という自動ルールの外側に、自分で直接「この文字は赤くしたい！」と指定したとします。すると、CSSはこう考えます。
「親の教え（継承）よりも、自分の意志（直接指定）を優先しよう！」
これを専門用語で「詳細度（しょうさいど）」と呼びます。誰の意見が一番重要かを決める「優先順位のランキング」のようなものです。
優先順位のヒエラルキー
1. IDセレクタ (`#my-id`)：圧倒的リーダー。最強の力を持っています。
2. クラスセレクタ (`.my-class`)：チームのまとめ役。頻繁に使われる、頼れる存在。
3. タグセレクタ (`p`, `div`)：一番の平民。みんなの基盤です。
もし同じ場所に「青くしたい（タグ）」という命令と「赤くしたい（クラス）」という命令がぶつかったら、順位が高い「クラス」の意見が採用されて、文字は赤くなります。
/ タグセレクタ：一番優先度が低い /
p {
color: blue; / 青くしたいという願い /
}
/ クラスセレクタ：タグより優先度が高い！ /
.special-text {
color: red; / 赤くしたいという強い意志 /
}
この文字は何色になるでしょう？
—
現場の知恵：つまずかないための心得
実務でCSSを書いていると、どうしても「あちこちから命令が飛んできて、何が効いているのか分からない！」という迷宮に入り込むことがあります。そんな時のために、先輩から教わった「黄金のルール」を授けますね。
- 「IDは最終兵器」： IDはあまりに強すぎるので、多用すると後で修正が効かなくなります。基本は「クラス」で制御するのが、長く愛されるコードのコツです。
- 「継承は味方」： 全体のフォントを`body`に設定しておけば、全部の文字にそれが適用されます。一括で管理できるのは、継承があるおかげです。
最後に：迷ったときは「ブラウザに聞こう」
もし、どうしても色が反映されないときは、ブラウザ（Chromeなど）の「検証ツール」という機能を開いてみてください。右クリックして「検証」を押すだけでOKです。
そこには、どのCSSが適用されていて、どれが打ち消されているのかが、まるで家系図のように表示されます。「あ、ここで負けてたのか！」と一目で分かりますよ。
CSSは、あなたの思い通りにデザインを操るための、とても楽しい道具です。
「継承」で全体を整え、「詳細度」で個性を出す。このバランスさえ掴めれば、あなたはもうCSSマスターへの第一歩を踏み出しています。
難しく考えすぎず、まずはパズルのように色々な指定を試してみてくださいね。応援しています！
コメント