ブラウザ環境の影響を受けないWebサイトを作るためのリセットcss（reset css）

よこのじ（@yokonoji_work）です。

今回は、ブラウザが違っても同じようにWebページを表示させるためのリセットcss（reset css）についてです。

ブラウザは、デフォルトでHTMLタグに適用するpaddingやmarginなどの設定値を持っています。しかし、この値はGoogle ChromeとFirefoxのようにブラウザが違えば、全く同じとは限りません。これにより、ブラウザによって見え方が違うという問題が発生します。

この問題を回避するのがリセットcss（reset css）です。

リセットcssとは？
おすすめのリセットcss
1. Eric Meyer’s Reset CSS v2.0
2. reboot.css

リセットcssとは？

リセットcssは、font-sizeやpadding, marginなどの値を任意の値に設定するものです。

上述のとおり、ブラウザはスタイル設定がないタグを表示させるときに、自身が持つ設定値を利用して表示させます。つまり、ブラウザごとに異なる設定値を持つことがブラウザによって見え方が違う原因です。

そのため、Webページ側でHTMLタグに対して値をきちんとスタイルを設定してあげる必要があります。各タグに対して padding: 0; のように値を明示しておけば、ブラウザが持つ設定値で表示されることなく、どのブラウザでも同じように見えますよね。その上で好みのデザインを設計していくわけですね。

このように、一旦リセットするための設定リストをリセットcssといいます。自分で独自に設定値を作っても良いですし、広く使われているものを利用することもできます。

なお、ユニバーサルセレクタを使ってリセットすることはおすすめしません。すべての要素に対して値を指定するので処理に時間がかかったり、リセットすべきでない要素をリセットしてしまったりするためです。

* {
  margin: 0;
  padding: 0;
}

おすすめのリセットcss

公開されているリセットcssは多くあり、どれを使えばいいのか迷うと思います。そこで、私が使うことを決めた２つのリセットcssとその特徴をご紹介します。

Eric Meyer’s Reset CSS v2.0

Eric Meyer’s Reset CSS v2.0はEric Meyerさん個人によって作られたリセットcssです。

Eric Meyer’sリセットcssを元にしてHTML5で追加されたタグにも対応したのがhtml5 DoctorのHTML5 Reset Stylesheetです。これは、公開年が2009年であることからEric Meyer’s Reset CSS v1.0（2008年）から修正されたものと思われます。その後、2011年にEric Meyer’s Reset CSS v2.0が公開されました。こちらもHTML5に対応していますで、ご安心ください。

また、css resetによるとダウンロード数がダントツ１位で、2018年の最も人気なリセットcssとされています（2018年11月28日時点）。