Webページを作成したことがある方は、一度はこんな経験をしたことがありませんか？

「あれ、別のブラウザで見たらスタイルが微妙に違う！」

私も経験があり、最初の頃はその理由が分かりませんでした。

この現象は、ブラウザごとに初期設定として適用しているスタイルシートに差異があるためです。実は、HTMLの各タグのスタイルは固有に存在しているだけではなく、ブラウザが独自のスタイルを割り当てているのです。

ブラウザが固有に所有しているスタイルシートは「User Agent Style Sheet」と言います。

したがって、スタイルの差異を意識せずに１つのブラウザで表示の確認を行なっていると、他のブラウザにおいて所々に差が生じてしまいます。

そこで、それを解決するための手段としてリセットCSSを使います。

リセットCSSとは

ブラウザごとの「User Agent Style Sheet」を打ち消して、各タグのスタイルを真っ新な状態にするためのCSSの総称です。これによって、無駄な余白が無くなったり文字の大きさが統一されたりするので、どのブラウザで見ても同じ状態になります。そして、ここから自分でスタイルを割り当てていくことによって、最終的に表示が統一されるというわけです。

リセットCSSは様々な開発元から提供されていますが、今回は最も人気の「Eric Mayer’s “Reset CSS” 2.0」の使い方について解説します。

Eric Mayer’s “Reset CSS” 2.0の使い方

Eric Mayer’s “Reset CSS” 2.0の公式サイトにCSSのコードが掲載されています。

以下のURLに接続して表示されているCSSのコードをコピーしてください。

https://meyerweb.com/eric/tools/css/reset/

そしたら、reset.cssなどの適当な名前でファイルを作成し、コードをペーストして保存してください。

最後に、これから編集していくHTMLファイル内でそのCSSを読み込みます。この時、他のCSSファイルよりも一番先に読み込みましょう。最初に読み込まないと、他のCSSによって割り当てられたスタイルが無効になってしまいます。

ブラウザで表示を確認した際に、どのタグでも文字の大きさや太さが同じようであれば導入は完了です。ここから、自由にスタイルを割り当てていってください。

まとめ

Web制作においてブラウザ間で表示を統一するのは当たり前なので、その際の１つの手段として今回のリセットCSSを使ってみるのがいいかもしれません。