【コピペ可！】リセット/ノーマライズ/サニタイズ それぞれのCSSの効果の違いを解説
Webサイトを制作するときに、Google ChromeやFirefox、Safari、Edgeなどがそれぞれ独自で持っているデフォルトCSSが邪魔をして、思った通りの表現ができない・・・
そんなときに役に立つのが「リセットCSS」と呼ばれる、ブラウザのデフォルトCSSを打ち消して
、すべてのブラウザで同様に表示されるようにするためのCSSです。
最近では、リセットCSSの他に「ノーマライズCSS」や「サニタイズCSS」と呼ばれるCSSも名前が聞かれるようになりました。
これらはすべて、「ブラウザごとの表示の差をなくすため」という目的は同じなのですが、考え方が少しずつ異なっています。
今回はそれらの違いについて説明していきます。
[adchord]
それぞれのCSSの違いについて
元にするHTML
下記のHTMLをもとに違いを見ていきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sanitize.css""> <title>Document</title> </head> <body> <h1>ページタイトル</h1> <h2>h2見出し</h2> <h3>h3見出し</h3> <h4>h4見出し</h4> <h5>h5見出し</h5> <h6>h6見出し</h6> <p>本文pタグ本文pタグ本文pタグ本文pタグ本文pタグ本文pタグ本文pタグ本文pタグ本文pタグ</p> <ul> <li>リスト１</li> <li>リスト２</li> <li>リスト３</li> </ul> <nav> <ul> <li>nav内リスト１</li> <li>nav内リスト２</li> <li>nav内リスト３</li> </ul> </nav> </body> </html>
リセットCSS
下記URLから、コピペできます！
meyerweb.com
The web home of Eric A. Meyer, CSS guy; and his wife Kathryn, doctor of nursing.
まずは最も古くからある考え方の「リセットCSS」についてです。
リセットCSSはすべてのHTMLタグに対してスタイルのリセットをおこなうCSSです。
そのため、リセットCSSを適用した場合、Google Chromeでは下記のような見た目になります。
h1タグであろうがh2タグであろうが、本文を表すpタグであろうが、すべて同じ文字サイズでmarginやpaddingもゼロになっていることが分かるかと思います。
このようにリセットCSSは、どんなHTMLタグでも見た目が同じになります。
ここから、自分の好きなようにスタイリングをおこなっていくことになります。
ノーマライズCSS
下記URLから、コピペできます！
About normalize.css – Nicolas Gallagher
A small CSS library to make browser defaults more consistent
次に「ノーマライズCSS」というものの考え方についてです。
ノーマライズCSSはブラウザ間で差異のある部分のみ、スタイルを統一するというCSSとなります。
ノーマライズCSSを適用すると、Google Chromeでは下記のような見た目になります。
ほぼほぼ、デフォルトのCSSを適用したときと見た目は変わっていないように見えますが、それは先ほど説明した「差異のある部分のみ」統一するというCSSだからです。
h1などの文字サイズはそのまま使いたいけど、ブラウザによって行間などの見た目が変わらないようにしたいなどといった場合には最適です。
[adchord]
サニタイズCSS
下記URLから、コピペできます！
csstools/sanitize.css
A best-practices CSS foundation. Contribute to csstools/sanitize.css development by
creating an account on GitHub.
最後に「サニタイズCSS」というCSSの考え方についてです。
サニタイズCSSは、ほぼノーマライズCSSと同じなのですが、レスポンシブWebデザインのサイトに最適化されています。
たとえば、
- box-sizing: border-box; が最初から適用されている。
- ナビゲーションに使うliタグには、ビュレットを付与しない。
などなどです。
【まとめ】では結局どれを使えばよいのか
ここまで3種類のCSSの違いを説明してきましたが、結局どれを使うのが正解なのかという問題があります。
結論から言えば、自分の好きなものを使えば問題ないかと思います。
SEOなど、サイトの表示速度などのパフォーマンスにはそれほど違いはないでしょうし、自分がまっさらな状態からスタイリングをしたいということであればリセットCSSを使えばよいし、最低限の記述で済ませたいがブラウザによって見た目が異なるのはイヤだという場合は、ノーマライズCSSやサニタイズCSSを使えば良いと思います。
いずれにせよ、それぞれの違いを知っておき、臨機応変にどのCSSも利用したら良いか考えられるようにしておくことが大事だと思います。