【サンプルコードあり】リセットCSSとノーマライズCSSとサニタイズCSSの違いとは?

ブラウザが持っているデフォルトのCSSへの対処として「リセットCSS」「ノーマライズCSS」「サニタイズCSS」の3つが有名ですが、それぞれの違いについてサンプルコードを付きで紹介していきます。

コンテンツ [表示]

  1. 1リセットCSSとノーマライズCSSとサニタイズCSSの違いとは?
  2. 1.1リセットCSSとは?
  3. 1.2ノーマライズCSSとは?
  4. 1.3サニタイズCSSとは?
  5. 1.4まとめ

リセットCSSとノーマライズCSSとサニタイズCSSの違いとは?

みなさんはリセットCSSノーマライズCSSサニタイズCSSの違いをご存知でしょうか?ブラウザのデフォルトのCSSを何とかコントロールしたいと思った時に選択肢に出てくるこの3者ですが、名前が違う通りそれぞれの意味が異なります。

今回の記事ではリセットCSSとノーマライズCSSとサニタイズCSSの違いについて実際に3者を適用したサンプルコード付きで解説していきます。

Photo byStockSnap

サンプルコードではリセットCSS・ノーマライズCSS・サニタイズCSSを適用していきますが、適応するベースのHTMLは下記を使用していきます。

それではそれぞれの意味を見ていきましょう。

リセットCSSとは?

リセットCSSは文字通りデフォルトのCSSをリセットするためのCSSです。

リセットCSSを使わない場合でもブラウザのデフォルトのCSSを1つ1つ上書きすれば打ち消しできますが、最初にリセットCSSを読み込むだけでほとんどのタグについてデフォルトのCSSを打ち消してくれます。

リセットCSSにはいくつか種類がありますが、今回は下記のリンクのリセットCSSを適用したサンプルをみてみましょう。

HTML5 Reset Stylesheet | HTML5 Doctor

上記がリセットCSSを適用した例です。リセットCSSの使い方は簡単でリセットCSSが記述されたファイル(今回だとreset.css)をheadタグの中で読み込むだけです。読み込む箇所は特にheadタグの内部でなくてもいいですが、読み込む順番はCSSの優先順位に影響が出てきますので、リセットCSSは最初に読み込むほうがいいかと思います。

いかがでしょうか。リセットCSSが無い時に比べて特に余白が無くなっているのが分かるかと思います。

また箇条書きにはビュレット(●のマーク)が消えているなどタグによってデフォルトのCSSで設定されているスタイルが打ち消されています。

ノーマライズCSSとは?

ノーマライズCSSはブラウザごとのデフォルトのCSSの違いを統一して、見た目を整えるCSSのことです。

つまいデフォルトのCSSはChromeやSafari、Edgeなどで微妙に異なりエンジニアはその差異に苦しめられます。そこからの脱却のために統一的なCSSを最初に読み込みブラウザ間のデフォルトCSSの違いを吸収しようという目的です。

サンプルコードでは下記のノーマライズCSSを適用してみたいと思います。

Normalize.css: Make browsers render all elements more consistently.

ノーマライズCSSの使い方もリセットCSSと同じくheadタグの中でCSSファイルを読み込むだけです。

デベロッパーツールでnormalize.cssが適用されている例
ぱっと見はベースのHTMLと見た目はあまり変わりませんが、デベロッパーツールでbodyやh1のタグを見てみてもnormalize.cssのスタイルが適用されています。

このスタイルにより他のブラウザで見たときでも見た目が統一されて見えるようになります。

サニタイズCSSとは?

さて、最後にサニタイズCSSですが、サニタイズCSSはノーマライズCSSに更にレスポンシブデザインへ対応しやすいようにbox-sizing: border-box;が適用されているのが特徴です。

平たく言うと、normalize.cssの目的に加えてレスポンシブデザインしやすいように追加でスタイルを加えたCSSです。

下記のリンクのsanitize.cssをサンプルコードに適用してみましょう。

GitHub - csstools/sanitize.css: A best-practices CSS foundation
A best-practices CSS foundation. Contribute to csstools/sanitize.css development by creating an account on GitHub.

見た目はほとんどnormalize.cssと変わりませんね。ただCSSのファイルの容量としてはサニタイズCSSの方が大きいです。

まとめ

さてリセットCSS、ノーマライズCSS、サニタイズCSSを使ってきましたがどれを使えばいいのか?という問題が出てきます。

もちろん使わずに自分でデフォルトのCSSを打ち消していくというやり方も一つです。

現場のルールに従う

リセットCSSにするかノーマライズCSSにするかサニタイズCSSにするか、または別の選択肢か。。は結構好みに依存する問題です。

  • リセットCSSで全てリセットして自分流のデフォルトを作りたい
  • ある程度ベースがあると楽だからノーマライズCSSが良さそう
  • レスポンシブでやるから、サニタイズCSSが良さそう
などなど、どれが一番良いのかまたは悪いのかは、一般的にありません。

とはいえどれにするかは最初に決めるべきことで、もしも複数人で開発をする場合にはまずどれにするかを話し合いましょう。

そして一度決まったルールには従うようにしましょう。

また下記の記事ではおすすめのリセットCSSとその使い方を紹介しています。ぜひ参考にしてみて下さい。

あわせて読みたい
【コピペで出来る】おすすめのリセットCSSと使い方を解説!のイメージ
【コピペで出来る】おすすめのリセットCSSと使い方を解説!
リセットCSSとはブラウザがデフォルトで持っているCSSをリセットする目的のCSSで、種類がいくつかあり今回はその中のおすすめと使い方を紹介します。

自分流カスタマイズでオリジナルリセットCSSを作成する

リセットCSSやノーマライズCSSなどオープンソースで配布されているものを利用するのもいいですが、自分流にカスタマイズして利用するのも一つの方法です。

今後新しいタグが出た時や、やはり「特定のプロパティを共通的に付けたいな」と思った時に自らの手でリセットCSSをカスタマイズできるのは強みです。

もちろん読み込むだけでも使える3者ではありますが、余裕がある時には自分でカスタマイズできうようにしておきましょう。

CSSのライブラリを使う場合は選択肢無い場合も

Bootstrapなどのフレームワークでは独自のリセットCSSを持っていて、フレームワークを使うのであれば自分でリセットCSSなどを用意する必要が無い場合があります。

逆にいうと選択の余地が無いとも言えますが、リセットCSS・ノーマライズCSS・サニタイズCSSのどれを使うかは結構意見が分かれるところでもありますので、「フレームワークの仕様に従う」というのも決断としては悪くないのかと思います。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次