勝手に回答シリーズ第4弾です。

⇒ 勝手に回答シリーズとは？

今回の疑問

normalize.cssを使えってことなのか、reset.cssを使えってことなのか、そもそも使わんくてもおけまるってことなのかわかんない

教材によっては何の説明もなく「とりあえず最初にこれを読み込んでおきましょう」とか書かれちゃうやつですね。

僕なりの回答

回答としては「使わんくてもおけまる」です。

絶対に使わなければならないものではありません。ただ、使った方が圧倒的に捗ると思います。

こう書くと、、、事実上の必須みたいな感じですが。。。

normalize.cssやreset.cssを学ぶ前に

この二つの役割を知る前に、知っておくべきことが一つあります。

それは、HTMLを書いてブラウザで表示した時に、マークアップした要素によってブラウザがデフォルトでちょっとしたデザインを施そうとする仕様があるということです。

これは、デフォルトスタイルシート（もしくは user agent stylesheet）などと呼ばれています。

具体的に言えば

  • h1タグでマークアップした場合に文字を大きくして太字に
  • pタグでマークアップした場合に、margin-bottomを1emにする
  • liタグでマークアップした場合に、リストの冒頭に「・」をつける

などなどです。※もっとたくさんあります。

例示すると以下のような感じです。

これ、僕は何もCSSを書いていません。ブラウザが勝手にこのように表現しているのです。

えっ？便利じゃん？

そう思った方もいらっしゃるかもしれませんが、それがそうでもないのです。

主に次の二点で不便なのです。

  • このデフォルトスタイルシートの表現がブラウザによって違いがある
  • 文字を大きくしたくないh1要素や、余白を開けたくないp要素が出てくる度にCSSを書かなければならない

前者の方はなんとなくイメージして頂けると思います。

Google Chromeではh1は20pxの大きさなのに、他のブラウザでは22pxというデフォルトの設定だったとしたらとても不便ですよね。

後者の方は、少しコーディングを経験してくると直ぐにわかると思います。

このデフォルトスタイルシート、とても邪魔なのです。。。

これらの問題を解決してくれるのが、normalize.cssやreset.css

前述した例で言うと

  • h1は16pxで！なんならどの要素も全部16pxで一旦統一で！
  • p要素の余白は0pxで！勝手に余白とかつけないで！
  • ul・li要素の行頭の字下げは止めて！

といったように、最初にブラウザのデフォルトのスタイルシートを帳消しにしておくのがreset.cssです。

一方で、「全部帳消しにするなんて勿体なくない？もうちょっといい感じに整理してみたよ」というのがnormalize.cssです。

reset.css や normalize.css がわかり難いのは、これが「決められたもの/配布されているようなもの」なのか「自分で作るものなのか」がハッキリとしないからでもあると思います。

結論から言えば、reset.css や normalize.css というのは配布されているものです。※それを自分なりにカスタマイズして使ったりします。

これらが初出になったのはいつだったのか正確にはわかりませんが、最初に提唱した人がつけた名前が reset.css や normalize.css という名前だったということです。

しかしながら、現在はこれを「総称」として呼ぶことがあるので、さらに説明がわかり難くなったりします。

つまりは、同じような役割を果たすCSSは、reset.css や normalize.css 以外にもたくさんあります。

「リセットCSS」で検索するとたくさん出てくるでしょう。

イメージとしては、ブラウザのデフォルトのCSSをなんとか調整するCSSの総称を「リセットCSS」といい、その種類に、 reset.css や normalize.css その他多数のものが色々な人によって提唱されていたり、人によっては自分でカスタマイズして使っているという感じです。

実際にリセットCSSをあてた例

実際に上記サンプルにリセットCSSをあててみます。

いかがでしょうか。

どのタグでマークアップされていても、すべて同じ表示になるのがお分かり頂けますでしょうか。

また、これはどのブラウザで見ても同じ表示になります。

何も装飾されていない素の状態という感じですね。

結局どっちを使えばいい？何を使えばいい？使わなくてもいいの？

上記例を見て「えっ、じゃあいちいちh1が出てきたら文字を大きくしたり太字にしたりするCSSを書いたり、pが出てきたらいちいち余白指定しなきゃいけないの？」と感じる間は、両方とも使わなくていいか、normalize.css に近しいものを探すとよいかもしれません。

「あれ、、なんかいちいちpのmarginを0pxって何回も指定してるな…」「liのこの「・」っていつもダサくて画像に変えたりしてる」「h1って別にいつも大きい太字ってわけじゃないぞ…」みたいに感じてきたり、そう感じる未来が想像できる方は reset.css 寄りのものをオススメします。

個人的には、初学者ほど reset.css を使っておくと「なんか思い通りにならない！」みたいなことが減って、勉強が捗るのではないかなと思います。