第1章　Reset CSSとは何か

ここからReset CSSについて解説するよ！かばんちゃんから教えてもらったことを、できるだけ分かりやすく私が教えるからね！

Reset CSSっていうのは、Webページを読み込んだときに既定で適用されるスタイル*1をリセットするものだよ！

Hard resetっていう「ユニバーサル（全称）セレクタを使ってすべてのmarginとpaddingを0にする」ところから始まったんだよ！（リスト1.1）そこから今までさまざまなReset CSSのフレンズが生まれたんだって！すっごーい！

* {
  margin: 0;
  padding: 0;
}

1.1　なぜReset CSSはユーザーエージェントスタイルシートを上書きできるか

Reset CSSはユーザーエージェントスタイルシートの宣言を上書きすることで、既定で適用されるスタイルをリセットしているんだよ！なんでリセットできるかって？それはスタイル宣言がされたちほー（オリジン）によって適用されるスタイルの優先順位があるためなんだって。よくわかんないけど、CSS Cascading and Inheritance Level 3（https://www.w3.org/TR/css-cascade-3/#cascading）から優先順位を引用すると次のとおりみたい。

1. transitionの宣言
2. !important付きのユーザーエージェントスタイルシートでの宣言
3. !important付きの利用者による宣言
4. !important付きの上書き宣言
5. !important付きの作者による宣言
6. animationの宣言
7. 上書き宣言
8. 作者による宣言
9. 利用者による宣言
10. ユーザーエージェントスタイルシートでの宣言

たとえばユーザーエージェントスタイルシートの宣言より、HTMLファイルからリンクされたCSS内の宣言が優先されるんだって。だからユーザーエージェントスタイルシートのスタイル宣言を上書きできるんだよー！…うー、ボスー！ちょっとよく分かんないよー！

1.2　なぜReset CSSを使うのか

Reset CSSを使うのは、ブラウザが既定で読み込むユーザーエージェントスタイルシートがブラウザ間で違いがあるからなんだよ！たとえばh1要素とp要素だけ書いたHTMLをブラウザで見てみるよ。

するとFirefoxはセリフ*2がないフォントだけど（図1.1）、Safariはセリフがあるフォントだよ（図1.2）。ふっしぎー！

図1.1: Firefoxでプレビューしたときの見た目

図1.2: Safariでプレビューしたときの見た目

こんな感じで単純なHTMLにも見た目に違いはあるんだよ！ブラウザによって得意なことは違うからなんらかのReset CSSライブラリを使うか自分で違いを吸収する必要があるんだってー！

1.3　Reset CSSを使わない場面

Reset CSSを使うのは、ブラウザが既定で適用するスタイルがブラウザ間で違いがあるからだけど、NW.js？やElectron？みたいなChromium？しか無いちほーではReset CSSを使わなくていいんだって！