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

# はじめに、デフォルトCSSについて

HTMLのタグには、デフォルトCSSが設定されています。 
例えば&lt;h1&gt;タグはfont-sizeを設定したわけでもないのに大きくボールドで表示されます。 
&lt;p&gt;タグも同様にmargin系のプロパティを設定していないのに下に空きができます。 
CSSでスタイルを設定しようとすると、思ったとおりの見栄えが実現できないことがよくありますが、理由の1つがこのデフォルトCSSです。 
デフォルトCSSの挙動は把握する必要はありますが、一方でデフォルトCSSはブラウザごとに微妙に設定が違います。 
これをある程度揃える目的でリセットCSS、ノーマライズCSS、サニタイズCSSが存在します。 

# デフォルトCSSを揃えるCSS

下記のHTMLを表示させることを考えます。

```
<h1>&lt;h1&gt;でマークアップされた見出し</h1>
<h2>&lt;h2&gt;でマークアップされた見出し</h2>
<h3>&lt;h3&gt;でマークアップされた見出し</h3>
<h4>&lt;h4&gt;でマークアップされた見出し</h4>
<h5>&lt;h5&gt;でマークアップされた見出し</h5>
<h6>&lt;h6&gt;でマークアップされた見出し</h6>

<ul>
  <li>&lt;nav&gt;の中にないli1</li>
  <li>&lt;nav&gt;の中にないli2</li>
  <li>&lt;nav&gt;の中にないli3</li>
</ul>
<nav>
  <ul>
    <li>&lt;nav&gt;の中にあるli1</li>
    <li>&lt;nav&gt;の中にあるli2</li>
    <li>&lt;nav&gt;の中にあるli3</li>
  </ul>
</nav>

<p>&lt;p&gt;タグ1つ目。ここには&lt;p&gt;で記述した内容が入ります。デフォルトCSS調整用のCSSを読み込むかどうかで見栄えが変わります。</p>
<p>&lt;p&gt;タグ2つ目。ここには&lt;p&gt;で記述した内容が入ります。デフォルトCSS調整用のCSSを読み込むかどうかで見栄えが変わります。</p>
```

調整用CSSを読み込まない場合、以下の見栄えになります。

|![デフォルトCSS調整用CSS（調整用CSSなし）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27902/b4d37be5-4950-7cdb-3761-4e9793420602.png)|
|:-:|

## リセットCSS

|![デフォルトCSS調整用CSS（reset.css）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27902/dd335301-1d94-0ae6-7d75-b37bb15ba311.png)|
|:-:|

デフォルトCSSをほぼ全て初期化するCSS。例えば以下です。 

- &lt;h1&gt;〜&lt;h6&gt;は全て同じフォントサイズになる。
- &lt;p&gt;のマージンがなくなる。
- &lt;li&gt;のビュレット[^1]が表示されなくなる。

マージンとパディングは全て0になります。 
まっさら過ぎるため、自分で独自のスタイルを定義していく必要も生じます。 
結果、CSS自体の記述量は増えてしまうでしょう。 
まっさらな状態から全てのCSSを設定したい場合に向いています。 

HTML5 Doctor Reset CSSが有名です。 
以下で記載されているコードをコピペしてreset.cssという名前で保存することで取得できます。 
[HTML5 Reset Stylesheet \| HTML5 Doctor](http://html5doctor.com/html-5-reset-stylesheet/)

保存したら、linkタグで読み込みましょう。 

```:html
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
```

## ノーマライズCSS

|![デフォルトCSS調整用CSS（normarize.css）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27902/ef54eccc-c2f0-4aed-7e91-bfb014b0aba2.png)|
|:-:|

デフォルトCSSで適用されるスタイルは可能な限り残しつつ、ブラウザ間での表示の差異をなくすように調整するCSS。 
デフォルトCSSのスタイルは維持しているので書かなくてもreset.cssと比較して1からの設定は少なくて済みます。
一方でmarginやpaddingを0にするなど、逐一書く必要が生じる箇所は出てきます。
デフォルトCSSの見栄えを活かしたい場合はこちらがよいでしょう。

以下からダウンロードできます。
[Normalize\.css: Make browsers render all elements more consistently\.](https://necolas.github.io/normalize.css/)

保存したら、linkタグで読み込みましょう。 

```:html
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
```

## サニタイズCSS

|![デフォルトCSS調整用CSS（sanitize.css）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27902/e64838ad-2741-4fcf-17a9-a9feb7934bb3.png)|
|:-:|

ノーマライズCSSをさらに気を利かせた感じのCSS。 
ある意味、タグのCSSフレームワークです。 
例えば以下の設定が追加されます。 

- &lt;nav&gt;&lt;ul&gt;に含まれる&lt;li&gt;（ページナビゲーションによく使われるタグ構造）にはビュレットを表示しない
- 全ての要素に「box-sizing: border-box」[^2]が適用されている。（レスポンシブWebデザインに便利）

以下からダウンロードできます。 
[sanitize\.css](https://csstools.github.io/sanitize.css/)

保存したら、linkタグで読み込みましょう。 

```:html
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">
```

# 使用上の注意

リセットCSS、ノーマライズCSS、サニタイズCSSは必ず一番最初に設定します。
つまりリセットCSSについての&lt;link&gt;タグは一番上に置きます。 
（上記の読み込み例は全て自分で設定したstyle.cssを後に読み込ませています。）

```:html
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">
```

後で設定すると、タグが上手くリセットされません。

# BootstrapなどのCSSフレームワークを使う場合

CSSフレームワークにもよりますが、基本的にはリセットCSS、ノーマライズCSS、サニタイズCSSの適用は不要なことが多いです。
例えば、Bootstrapには、reboot.cssというデフォルトCSS調整用のCSSが組み込まれています。
つまりbootstrapを読み込むだけでデフォルトCSSの調整がなされる、ということです。
これらのCSSフレームワークを採用しない場合にリセットCSS、ノーマライズCSS、サニタイズCSSが選択候補になるでしょう。

[^1]: ビュレット: &lt;li&gt;タグの前にある「・」のこと。
[^2]: 「border-box」はパディングとボーダーを幅と高さに含める設定。 パディングとボーダーを幅と高さに含めない設定は「content-box」で、本来はこちらが初期値。