こんにちは！CSSの世界へようこそ。
フロントエンドの荒波を越えてきた僕から見て、初心者の皆さんが最初にぶつかる「CSSが全然言うことを聞いてくれない！」という壁。実はこれ、技術が足りないのではなく、ブラウザという「個性の強い相棒」との付き合い方がまだ見えていないだけなんです。
今日は、CSSの「お作法」であるリセットCSSとノーマライズCSSについて、少し肩の力を抜いてお話ししましょう。
—
ブラウザは、実は「おせっかいな職人」なんです
Webサイトを作るとき、僕たちは真っ白なキャンバスに絵を描くつもりでCSSを書きますよね。でも、ブラウザ（ChromeやSafariなど）は、最初から「これくらいのマージンがあったほうが親切でしょ？」といろんな飾り付けを勝手にしてくれているんです。
これが、ブラウザ間の差異（バラつき）の正体です。
この「おせっかい」を黙らせて、自分の理想のレイアウトを作るために登場するのが「リセットCSS」や「ノーマライズCSS」という道具たちです。
1. リセットCSS：キャンバスを真っ白に消し去る消しゴム
リセットCSSは、ブラウザが勝手につけた設定を「全部ゼロ！」と消し去る強力な消しゴムのようなものです。
- メリット： 何もかもがゼロになるので、計算がしやすく、自分の思い通りの配置が作りやすい。
- デメリット： ゼロにしすぎるので、見出しや箇条書きの基本的なスタイルまで消えてしまい、全部自分で書き直す羽目になることも。
2. ノーマライズCSS：ブラウザの個性を「標準化」する調整役
ノーマライズCSSは、ブラウザの個性を完全に消すのではなく、「どのブラウザで見ても大体同じくらいの見栄え」になるよう、マナーを統一する調整役です。
- メリット： 大事なスタイルは残しつつ、崩れだけを防いでくれる。
- デメリット： ブラウザの癖が少し残るため、厳密なデザインを指定したいときは微調整が必要。
—
現場で絶対につまずかないための「優先順位」戦略
さて、ここからが本題です。これらをどう読み込ませれば、皆さんが書いた「こだわりのCSS」が負けないようになるのでしょうか？
答えはシンプル。「道具は先に、自分は後に」です。
黄金の読み込み順序ルール
HTMLの `
` タグの中で、CSSを読み込む順番を意識しましょう。
なぜこの順番なのか？
CSSは「後から書いたもの（または後に読み込まれたもの）が優先される」という性質があるからです。もし自分のスタイルを先に書いてしまうと、後からやってきたリセットCSSに「余白は0！」と上書きされてしまい、皆さんの努力が水の泡になってしまいます。
—
「!important」という禁断の果実について
皆さんがCSSを書いていると、どうしても言うことを聞いてくれない時、「もう面倒だから `!important` をつけちゃえ！」と誘惑に駆られることがあるかもしれません。
「`!important` はCSS界の最後の切り札」だと思ってください。
- たとえ話： お店で買い物をする時、列に並んでいるのに無理やり割り込むようなものです。一度やってしまうと、後から修正したい時に「割り込んだせいで優先順位がわからなくなった！」という大混乱を招きます。
本当にどうしても動かない時の最終手段として取っておき、基本は「詳細度（CSSの書き方の具体性）」で勝負しましょう。
/ なかなか変わらない時は、CSSの記述を具体的にしてあげる /
/ 悪い例：ただの h1 だと優先度が低い /
h1 { color: red; }
/ 良い例：親要素から指定してあげると、ブラウザも「あ、ちゃんと場所指定してるのね！」と優先してくれる /
.header-wrapper h1 {
color: red;
}
—
最後に：つまずくことは、成長の証です
CSSでレイアウトが崩れるのは、決して皆さんのせいではありません。「ブラウザという個性的な相手」と「自分の理想」をどう調和させるか、そのパズルを楽しんでいるだけなんです。
最初は「リセットCSSを入れて、その後に自分のCSSを書く」。これだけ覚えておけば大丈夫。あとは書きながら、「あ、ブラウザがこう動くんだな」と少しずつ仲良くなっていけばOKです。
皆さんのWeb制作が、明日もっと楽しくなりますように。応援しています！
コメント