リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。
分かりやすい例だと、inputタグなどはSafariとChromeでは全く異なる表示になってしまいますが、リセットCSSを使うことでそれぞれの表示を整えることができます。
リセットCSSは、CDNを使ったりコードをコピペするだけで簡単に導入することができるので、Webサイトをコーディングするときには正しくリセットCSSを使用するようにしましょう。
今回は、2020年最新のおすすめリセット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をご紹介していきたいと思います。
- すべてリセットするタイプ
-
- destyle.css
- HTML5 Doctor Reset CSS
- デフォルトのスタイルが当てられるタイプ
-
- Normalize.css
- A modern CSS reset
- ress.css
- Reboot.css
すべてリセットするタイプは、marginやpaddingなどをすべて0にして、font-sizeもすべて統一されます。余計なスタイルが付かないので管理しやすいですが、その分自分でスタイルを当てないといけないので手間が少し増えます。
デフォルトのスタイルが当てられるタイプでは、marginやpaddingは0で統一しますが、h1タグやh2タグのfont-sizeなどはタグに合わせたサイズで表示されたり、ulタグやolタグも左側にpaddingが付けられるなどデフォルト状態である程度スタイルが整えられています。
では、それぞれ詳しくご紹介していきましょう。
destyle.css
destyle.cssは、その名の通りデフォルトのスタイリングをほぼ無くすことができるリセットCSSです。
上記の画像を見ると分かるように、基本的にタグのデフォルトのスタイリングがすべて打ち消されています。
まっさらな状態から自分でCSSを書くことができ、いちいちリセットCSSの記述を意識する必要がなく、慣れてしまうと非常に扱いやすいリセットCSSだと思います。
公式の説明では、下記のように述べられています。
- ブラウザによる表示の違いを無くせる
- デフォルトのmarginやpaddingなどを消す
- font-sizeとline-heightをリセットする
- ユーザーエージェントの違いによる差異を無くす
- 必要最低限の要素に絞ることで、ファイルサイズを小さく抑える
- すべてのスタイリング手法においても問題なく動作する
その他に、destyle.cssが優れている点としては、下記のようなものがあります。
- box-sizing: border-box;が含まれている
- iOSでタップした時のグレー表示も消してくれる
- marginは基本的に0
- ファイルサイズが適切に抑えられている
個人的には、デフォルトのスタイリングはすべて打ち消してコーディングする方が実装しやすいので、最近はdestyle.cssを使うことが多く、今一番おすすめのリセットCSSです。
HTML5 Doctor Reset CSS
こちらも、デフォルトのスタイリングを最小限に抑えることができるタイプのリセットCSSです。
destyle.cssと比べると、h1タグなどが太字になっているほか、フォームなどは最低限のスタイリングが当てられています。
現在でも問題なく使うことはできますが、かなり前に作られたリセットCSSなので、今後のブラウザのアップデートなどによっては意図せぬ挙動が出てくるかもしれません。
marginやpaddingはすべて0になるので、自分で記述する必要があります。また、box-sizing: border-box;
の記述はないので、必要な場合は下記のコードを自分で追加して使用しましょう。
1 2 3 4 5 |
*, *::before, *::after { box-sizing: border-box; } |
Normalize.css
destyle.cssなどがデフォルトのスタイル設定をすべて消してしまうのに対し、Normalize.cssはすべてのブラウザでの表示を統一しながらも、デフォルトのスタイルを与えるリセットCSSです。
例えば、destyle.cssではh1タグもh2タグも同じような表示にしてしまいますが、Normalize.cssでは見出しのレベルに合わせたフォントサイズが与えられています。
これによって、ブラウザ間の差異を打ち消しながらも、始めからそれなりに整えられた表示を行えるようになっています。
しかし、結局自分で見出しのフォントサイズやスタイルをCSSで記述する場合が大半なので、逆に困ることの方が多いかもしれません。
また、box-sizing: border-box;
の記述はないので、必要な場合は下記のコードを自分で追加して使用しましょう。
1 2 3 4 5 |
*, *::before, *::after { 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です。
公式に紹介されている特徴として、下記のようなものがあります。
- すべての要素に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; を適用
少し分かりづらいかもしれませんが、Normalize.cssの良さを継承しつつ、より使いやすいようにカスタマイズされています。
Normalize.cssではmarginやpaddingが要素によってばらつきがありましたが、ressはmarginとpaddingを0にしてくれるので、使い勝手がいいというのも特徴の1つです。
Reboot.css
Reboot.cssは、Bootstrap 4で使用されているリセットCSSで、下記のような特徴があります。
- フォントサイズの指定にremを使用
- 色々な要素のmargin-topを削除
- サイズ変更に適用しやすいように、marginの値をremで指定
最近少し注目を集めているリセットCSSですが、元々Bootstrapで使用する前提で作られており、他のリセットCSSと比べると少しクセが強いので、人によって好みが分かれやすいです。
結局どれがいいのか
リセットCSSにどれを使うかは、そのプロジェクトの背景やコーダーの好みなど色々な理由があると思いますが、結論から言うと下記がおすすめです。
- すべてのCSSをリセットされた状態から始めたい場合
- 「desltye.css」がおすすめ(ほとんどのスタイリングを打ち消してくれる)
- ある程度整えられた状態から始めたい場合
- 「A Modern CSS Reset」がおすすめ(コードがシンプルで、適度にスタイリングされている)
とはいえ、いずれのリセットCSSにもメリットとデメリットがあるので、最終的には好みのリセットCSSを使用すれば問題ないでしょう。
まとめ
リセットCSSは、公開されているものをそのまま使用する形でも問題ありませんが、慣れてきたら自分で使いやすいようにそれらをカスタムしていくのがおすすめです。
毎回同じように設定するセレクタや、必ず使用するクラスなどをリセットCSSとして設定しておくことによって、作業をさらに効率的に行うことができるようになります。
リセットCSSをじっくりと読み込む機会はあまりないかもしれませんが、少し時間を取ってリセットCSSに書かれているコードを読み込んでみると、色々な発見があるかもしれません。