ブラウザごとに表示が違うのをなんとかしたい、reset.css・normalize.cssの違いと解説

ホームページを作っていくにあたってまず必ず認識しなければならないのが、
「ブラウザごとによって初期設定に異なるCSSが適用されている事」です。

例えば、見るブラウザによって文字の大きさや余白が違っていたり、その影響でレイアウトが崩れたりしてしまうのです。

このようなズレを解消するのに最初に読み込むCSSファイルとしてreset.cssとnormalize.cssというものがあります。

最近のコーディングでは主にnormalize.cssを使用する事が多いのですが、
今回はこのreset.cssとnormalize.cssの違いについて説明いたします。


reset.cssとは



デフォルトでブラウザに設定されているCSSを全てリセットしてスタイルに何も入っていない状態からCSSを設定していくために作られたのがreset.cssです。

メリットとしては全てのcssがリセットされるのでデザインしやすいのですが、
デメリットとしてはulの「・」の設定をするのにリセットしたCSSを作り直さなければならなかったり、フォームのデザインを1からし直す必要があったりと問題点もいくつかあります。

ここでは有名なreset.cssを二つご紹介します。

Eric Mayer氏が考案したリセットCSS
http://meyerweb.com/eric/tools/css/reset/

Yahoo! CSS Reset (YUI 3)
https://developer.yahoo.com/yui/reset/


normalize.cssとは

normalize.cssとは上のreset.cssは全てのcssの設定をリセットしてしまうのに対し、こちらはデフォルトのCSSは残しながら、各ブラウザの差異だけを無くしたものになります。

メリットとしては差異だけをなくすだけなのでデフォルトのCSSを活用する事ができ、css内にもコメントが記載されているのでスタイルの設定がしやすくなっています。
デメリットとしては、reset.cssよりもコード量が多くなっています。

normalize.cssは、公式サイトよりダウンロードする事が可能です。

Normalize.css
http://necolas.github.io/normalize.css/


まとめ

いかがでしたでしょうか？
両方にメリット、デメリットがありますが、近年ではスマートフォン用のブラウザ対応であったり、html5にも対応していることからnormalize.cssが主流になっています。

ただ、normalize.cssはデフォルトのCSSを書き換える場合、リセットの考慮を考えなければならないので、時と場合でreset.cssとnormalize.cssを使い分けましょう。