別冊webメモ

自分用リファレンス&アウトプット

サイトをつくるときは最初にreset.cssかnormalize.cssを読み込む

ChromeSafariなど、ブラウザはそれぞれユーザーエージェントスタイルシートと呼ばれるデフォルトのCSSを持っていて、CSSを当てていないHTMLでもある程度読みやすく表示されるようになっています。
ただし、それぞれの値は異なるので、ブラウザごとに余白など見た目が違ってきます。

f:id:aoicotori:20160307191935j:plain
このままの状態でスタイルを書いていくと、ブラウザごとに食い違いがでてしまいます。

reset.cssでリセットする

この各ブラウザのデフォルトCSSを0値にリセットしてくれるのが、reset.cssです。
reset.cssを読み込んでから、スタイルを書くことでブラウザの差異なく構築することができます。

f:id:aoicotori:20160307192124j:plain

reset.cssはいくつかあって、最近人気のreset.cssはこちらから確認することができます。
cssreset.com

normalize.cssで整える

reset.cssの他にnormalize.cssというcssもあります。
reset.cssとの違いは、reset.cssが初期化するのに対して、normalize.cssは有用なスタイルをそのまま維持するように設計されています。

Normalize.css: Make browsers render all elements more consistently.

html5スマホにも対応していて、最近はreset.cssよりも主流の模様。

なぜリセットではなく Normalize.css を使うのか


次のリセットcss?sanitize.css

reset.cssとnormalize.cssに続くリセットcssとして、sanitize.cssが開発されているようです。
coliss.com


プロジェクトごとに、やりやすい形で選ぶのが良いと思います。