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

よこのじ(@yokonoji_work)です。

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

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

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

リセットcssとは?

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

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

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

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

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

* {
  margin: 0;
  padding: 0;
}

おすすめのリセットcss

公開されているリセットcssは多くあり、どれを使えばいいのか迷うと思います。そこで、私が使うことを決めた2つのリセット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によるとダウンロード数がダントツ1位で、2018年の最も人気なリセットcssとされています(2018年11月28日時点)。

  • Eric Meyer’s Reset CSS v2.0:104,422
  • HTML5 Doctor CSS Reset:43,680
cssを表示

reboot.css

こちらはBootstrap4に含まれるcssファイルです。GitHUBよりreboot.cssを取得することができます。
dist -> css -> bootstrap-reboot.css or bootstrap-reboot.min.css

reboot.cssはNormalize.cssを元に作られていて、完全にリセットするのではなくブラウザが持つデフォルト値を適切に残しながら最小限のデザインを与えることを目的としています。

Normalize.cssとは次のような点が異なり、より使い勝手が良くなっています。

  • すべての要素にbox-sizing: border-box;を使用(パディングとボーダーを幅と高さに含める)
  • フォントやマージンのサイズにremを使用
  • デフォルトフォントにOSの標準フォントを使用
  • h1,h2,h3,h4,h5,h6,p,ul,ol,dl,preのマージントップを削除
  • touch-action: manipulation;により、モバイル端末でリンク・ボタンなどをタッチしたときの反応遅延をなくしている
cssを表示