リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。

分かりやすい例だと、inputタグなどはSafariとChromeでは全く異なる表示になってしまいますが、リセットCSSを使うことでそれぞれの表示を整えることができます。

リセットCSSは、CDNを使ったりコードをコピペするだけで簡単に導入することができるので、Webサイトをコーディングするときには正しくリセットCSSを使用するようにしましょう。

今回は、2020年最新のおすすめリセットCSSをご紹介していきたいと思います。

リセットCSSとは？

リセットCSSとは、Google ChromeやSafari、Internet Explorerなど異なるブラウザを使っても同じようにWebサイトが表示されるためのCSSファイルのことを指します。

ブラウザが元々持っているデフォルトのCSSの設定を上書きするように、ブラウザ毎に異なるスタイルを持つ特定のセレクタに対してプロパティを指定してブラウザ間の表示を揃えるという仕組みです。

実際に、世の中に公開されているWebサイトのほとんどがリセットCSSを使って公開されており、Web制作の現場でもリセットCSSを使用することは一般的になっています。

リセットCSSを使わずにWebサイトを作ってしまうと、ブラウザによってデザインが崩れてしまったり、CSSのコードが煩雑になるので、Webサイトのコーディングを行う時はリセットCSSを導入することがおすすめします。

リセットCSSを使用するメリットとデメリット

リセットCSSを使用することでブラウザごとの表示を揃えることができるというメリットがありますが、同時にデメリットもあります。

リセットCSSのメリットとデメリットをまとめると、下記のようになります。

つまり、リセットCSSを使うことによってブラウザ間の表示を統一することができるが、余計なコードが増えてしまうということになります。

しかし、余計なコードと言ってもCSSはあくまでテキストデータなので、ページ表示速度への影響はあまり考えなくていいでしょう。

それよりも、ブラウザごとに異なるデザインが表示されてしまうことを防げるというメリットの方が圧倒的に大きいので、リセットCSSを使ってコーディングを行うのが一般的です。

おすすめのリセットCSS

人気のリセットCSSはいくつかありますが、その中でも2019年現在おすすめのリセットCSSをご紹介していきたいと思います。

すべてリセットするタイプは、marginやpaddingなどをすべて0にして、font-sizeもすべて統一されます。余計なスタイルが付かないので管理しやすいですが、その分自分でスタイルを当てないといけないので手間が少し増えます。

デフォルトのスタイルが当てられるタイプでは、marginやpaddingは0で統一しますが、h1タグやh2タグのfont-sizeなどはタグに合わせたサイズで表示されたり、ulタグやolタグも左側にpaddingが付けられるなどデフォルト状態である程度スタイルが整えられています。

では、それぞれ詳しくご紹介していきましょう。

destyle.css

destyle.cssは、その名の通りデフォルトのスタイリングをほぼ無くすことができるリセットCSSです。

上記の画像を見ると分かるように、基本的にタグのデフォルトのスタイリングがすべて打ち消されています。

まっさらな状態から自分でCSSを書くことができ、いちいちリセットCSSの記述を意識する必要がなく、慣れてしまうと非常に扱いやすいリセットCSSだと思います。

公式の説明では、下記のように述べられています。

その他に、destyle.cssが優れている点としては、下記のようなものがあります。

個人的には、デフォルトのスタイリングはすべて打ち消してコーディングする方が実装しやすいので、最近はdestyle.cssを使うことが多く、今一番おすすめのリセットCSSです。

HTML5 Doctor Reset CSS

こちらも、デフォルトのスタイリングを最小限に抑えることができるタイプのリセットCSSです。

destyle.cssと比べると、h1タグなどが太字になっているほか、フォームなどは最低限のスタイリングが当てられています。

現在でも問題なく使うことはできますが、かなり前に作られたリセットCSSなので、今後のブラウザのアップデートなどによっては意図せぬ挙動が出てくるかもしれません。

marginやpaddingはすべて0になるので、自分で記述する必要があります。また、box-sizing: border-box;の記述はないので、必要な場合は下記のコードを自分で追加して使用しましょう。

Normalize.css

destyle.cssなどがデフォルトのスタイル設定をすべて消してしまうのに対し、Normalize.cssはすべてのブラウザでの表示を統一しながらも、デフォルトのスタイルを与えるリセットCSSです。

例えば、destyle.cssではh1タグもh2タグも同じような表示にしてしまいますが、Normalize.cssでは見出しのレベルに合わせたフォントサイズが与えられています。

これによって、ブラウザ間の差異を打ち消しながらも、始めからそれなりに整えられた表示を行えるようになっています。

しかし、結局自分で見出しのフォントサイズやスタイルをCSSで記述する場合が大半なので、逆に困ることの方が多いかもしれません。

また、box-sizing: border-box;の記述はないので、必要な場合は下記のコードを自分で追加して使用しましょう。

A Modern CSS Reset

こちらは、ブラウザによる表示の差異を無くしつつも、ユーザビリティを担保してくれるというリセットCSSです。

例えば、クラス名がつけられているaタグはスタイリングを行わず、クラス名が無いaタグにはデフォルトのスタイリングを当てるなど、使いやすさを考慮して作られています。

Normalize.cssは非常に細かく記述されているのに対し、A Modern CSS Resetは必要最低限な記述に留められていて、ファイルサイズが小さいというのも特徴の1つです。

上記の通り、h1~h4までしか定義されていないので、h5,h6タグを使用する場合は自身で追加する必要があります。

ress.css

ress.cssは、基本的な考え方はNormalize.cssと同じですが、より使いやすいように修正されているリセットCSSです。

公式に紹介されている特徴として、下記のようなものがあります。

少し分かりづらいかもしれませんが、Normalize.cssの良さを継承しつつ、より使いやすいようにカスタマイズされています。

Normalize.cssではmarginやpaddingが要素によってばらつきがありましたが、ressはmarginとpaddingを0にしてくれるので、使い勝手がいいというのも特徴の1つです。

Reboot.css

Reboot.cssは、Bootstrap 4で使用されているリセットCSSで、下記のような特徴があります。

最近少し注目を集めているリセットCSSですが、元々Bootstrapで使用する前提で作られており、他のリセットCSSと比べると少しクセが強いので、人によって好みが分かれやすいです。

結局どれがいいのか

リセットCSSにどれを使うかは、そのプロジェクトの背景やコーダーの好みなど色々な理由があると思いますが、結論から言うと下記がおすすめです。

とはいえ、いずれのリセットCSSにもメリットとデメリットがあるので、最終的には好みのリセットCSSを使用すれば問題ないでしょう。

まとめ

リセットCSSは、公開されているものをそのまま使用する形でも問題ありませんが、慣れてきたら自分で使いやすいようにそれらをカスタムしていくのがおすすめです。

毎回同じように設定するセレクタや、必ず使用するクラスなどをリセットCSSとして設定しておくことによって、作業をさらに効率的に行うことができるようになります。

リセットCSSをじっくりと読み込む機会はあまりないかもしれませんが、少し時間を取ってリセットCSSに書かれているコードを読み込んでみると、色々な発見があるかもしれません。

おすすめの記事