リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。
分かりやすい例だと、inputタグなどはSafariとChromeでは全く異なる表示になってしまいますが、リセットCSSを使うことでそれぞれの表示を整えることができます。
リセットCSSは、CDNを使ったりコードをコピペするだけで簡単に導入することができるので、Webサイトをコーディングするときには正しくリセットCSSを使用するようにしましょう。
今回は、2019年最新のおすすめリセットCSSをご紹介していきたいと思います。
INDEX
リセット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を使うことによってブラウザ間の表示を統一することができるが、余計なコードが増えてしまうということになります。
しかし、余計なコードと言ってもCSSはあくまでテキストデータなので、ページ表示速度への影響はあまり考えなくていいでしょう。
それよりも、ブラウザごとに異なるデザインが表示されてしまうことを防げるというメリットの方が圧倒的に大きいので、リセットCSSを使ってコーディングを行うのが一般的です。
おすすめのリセットCSS
人気のリセットCSSはいくつかありますが、その中でも2019年現在おすすめのリセットCSSをご紹介していきたいと思います。
- すべてリセットするタイプ
-
- Eric Mayer’s Reset CSS 2.0
- HTML5 Doctor Reset CSS
- デフォルトのスタイルが当てられるタイプ
-
- Normalize.css
- ress
- Reboot.css
すべてリセットするタイプは、marginやpaddingなどをすべて0にして、font-sizeもすべて統一されます。余計なスタイルが付かないので管理しやすいですが、その分自分でスタイルを当てないといけないので手間が少し増えます。
デフォルトのスタイルが当てられるタイプでは、marginやpaddingは0で統一しますが、h1タグやh2タグのfont-sizeなどはタグに合わせたサイズで表示されたり、ulタグやolタグも左側にpaddingが付けられるなどデフォルト状態である程度スタイルが整えられています。
では、それぞれ詳しくご紹介していきましょう。
Eric Mayer’s Reset CSS 2.0
Eric Mayer’s Reset CSSは、あらゆる要素のmargin、paddingなどを0に指定することで、文字通りブラウザが持っているデフォルトのCSS設定をすべてリセットしてしまいます。
ただし、一部HTML5に未対応なので、次のHTML5 Doctor Reset CSSの方がおすすめです。
HTML5 Doctor Reset CSS
こちらは、Eric Mayer’s Reset CSSをHTML5に対応させたものです。特にこだわりがない場合は、Eric Mayer’s Reset CSSをそのまま使用するよりもこちらを使用した方がいいでしょう。
すべてリセットするため、まっさらな状態から自分でCSSを書くことができ、いちいちリセットCSSの記述を意識する必要がなく、慣れてしまうと非常に扱いやすいリセットCSSです。
marginやpaddingはすべて0になるので、自分で記述する必要があります。また、box-sizing: border-box;の記述はないので、必要な場合は下記のコードを自分で追加して使用しましょう。
|
1 2 3 4 5 |
*, *::before, *::after { box-sizing: border-box; } |
Normalize.css
Reset CSSがデフォルトのスタイル設定をすべて消してしまうのに対し、Normalize.cssはすべてのブラウザでの表示を統一しながらも、デフォルトのデザインを与えるリセットCSSです。
例えば、Reset.cssではh1タグもh2タグも同じような表示にしてしまいますが、Normalize.cssでは見出しのレベルに合わせたフォントサイズが与えられています。
これによって、ブラウザ間の差異を打ち消しながらも、デフォルトでそれなりに整えられた表示を行えるようになっています。
しかし、結局自分で見出しのフォントサイズやスタイルをCSSで記述する場合が大半なので、逆に困ることの方が多いかもしれません。
また、box-sizing: border-box;の記述はないので、必要な場合は下記のコードを自分で追加して使用しましょう。
|
1 2 3 4 5 |
*, *::before, *::after { box-sizing: border-box; } |
ress
ressは、基本的な考え方はNormalize.cssと同じですが、より使いやすいように修正されているリセットCSSです。
公式に紹介されている特徴として、下記のようなものがあります。
- すべての要素にbox-sizing: border-box; を適用
- すべての要素のpaddingとmarginをリセット
- すべての要素に background-repeat: no-repeat; を適用
- before要素やafter要素にtext-decorationやvertical-alignを継承
- ホバー時のoutlineを無効化
- font-familyにmonospaceを指定
- input要素のborder-radiusを無効化
- フォーム要素でfontを継承
- ブラウザ毎のボタンの標準スタイルを打ち消し
- テキストエリアで risize: vertical; を指定
- button要素に cursor: pointer; を適用
少し分かりづらいかもしれませんが、Reset.cssとNormalize.cssの良さを継承しつつ、より使いやすいようにカスタマイズされています。
Normalize.cssではmarginやpaddingが要素によってばらつきがありましたが、ressはmarginとpaddingを0にしてくれるので、使い勝手がいいというのも特徴です。
Reboot.css
Reboot.cssは、Bootstrap 4で使用されているリセットCSSで、下記のような特徴があります。
- フォントサイズの指定にremを使用
- 色々な要素のmargin-topを削除
- サイズ変更に適用しやすいように、marginの値をremで指定
最近少し注目を集めているリセットCSSですが、元々Bootstrapで使用する前提で作られており、他のリセットCSSと比べると少しクセが強いので、人によって好みが分かれやすいです。
結局どれがいいのか
リセットCSSにどれを使うかは、そのプロジェクトの背景やコーダーの好みなど色々な理由があると思いますが、結論から言うと下記がおすすめです。
- すべてのCSSをリセットされた状態から始めたい場合
- 「HTML5 Doctor Reset CSS」がおすすめ（HTML5に対応している）
- ある程度整えられた状態から始めたい場合
- 「ress」がおすすめ（margin, paddingを0にしてくれるため扱いやすい）
とはいえ、いずれのリセットCSSにもメリットとデメリットがあるので、最終的には好みのリセットCSSを使用すれば問題ないでしょう。
まとめ
リセットCSSは、公開されているものをそのまま使用する形でも問題ありませんが、慣れてきたら自分で使いやすいようにそれらをカスタムしていくのがおすすめです。
毎回同じように設定するセレクタや、必ず使用するクラスなどをリセットCSSとして設定しておくことによって、作業をさらに効率的に行うことができるようになります。
リセットCSSをじっくりと読み込む機会はあまりないかもしれませんが、少し時間を取ってリセットCSSに書かれているコードを読み込んでみると、色々な発見があるかもしれません。
