第2章　Reset CSSの特色

Reset CSSは2004年に生まれて数多くのReset CSSが生まれてきたであります。Reset CSSは年代によって思想や宣言されているスタイルが少しずつ変わっているでありますよ。ここでは有名なReset CSSを7個見ていくでありますよー！うおー！

2.1　Hard reset

Hard resetは2004年に発表された、おそらく最初のReset CSSであります*1！最初のReset CSSだけあって単純であります（リスト2.1）。

* {
  margin: 0;
  padding: 0;
}

Hard resetという名は「A Comprehensive Guide to CSS Resets*2」という記事で出てきたであります。当時の状況はよく分からないので、ここからはわたしの勘によって書くでありますよー！

Hard resetが発表されたときは、ブラウザ間でmarginやpaddingの値に差があることに関心があったようであります。そのためユニバーサルセレクタでmarginとpaddingを0にして、ブラウザ間のmarginやpaddingの値に差があるのを無かったことにしたようでありますよ。

2.2　Eric Meyer's Reset CSS

Eric MeyerというCSSへ対しとても貢献している人がいるであります。Eric Meyerの実績はすごいでありますよ！*3

• オライリーから出版されたCSS: The Definitive Guide*4（日本語版はCSS完全ガイド*5）を執筆
• 上記の本以外にも多数の本を執筆*6
• css-discuss.orgの立ち上げ*7
• スライドショー用のファイルフォーマットS5を考案*8
• Netscape DevEdgeやCase Western Reserve University、Encyclopedia of Cleveland Historyのプロジェクトリーダーとデザイナーだった

最近ではその功績にコミュニティが敬意を払って、6歳で亡くなってしまった娘の名前をCSSの色名beccapurpleとして追加しようと提案されたであります*9。そして本人と亡くなってしまった娘の要望*10によって、rebeccapurpleとしてCSS Color Module Level 4*11に追加されたであります！すごいであります！

そのEric MeyerがHard resetの問題点を踏まえた上で作ったReset CSSがEric Meyer's Reset CSSであります。Hard resetの問題点は次の2点であります。これらの問題を解決するためにそれぞれの要素ごとにリセットしたのがEric Meyer's Reset CSSであります！

• ユニバーサルセレクタを使ってmarginやpaddingを0にするやり方がフォーム関連の要素に対してどういった影響があるか分からない
• marginやpaddingを0にするだけでなく、フォントに関わる一貫したスタイル宣言をしたい

Eric Meyer's Reset CSSのソースコードはhttp://meyerweb.com/eric/tools/css/reset/であります！

2.3　YUI 3 Reset CSS

Yahoo!が主に開発していたYUI libraryに含まれるReset CSSであります！ちなみにYUI 3はこれからメンテナンスをおこなわないというアナウンスをしているのであります*12。

他のReset CSSに無いものとして、html要素に対しcolorプロパティやbackgroundプロパティが宣言されているでありますよ。ただYUI 2からReset CSSはほぼ更新されていない*13*14であります。なのでHTML5で追加された要素の宣言は無いであります*15。

2.4　HTML5 Doctor Reset CSS

HTML5を使った開発について発信していたHTML5 Doctorで発表されたReset CSSであります！HTML5 Doctor Reset CSSのソースコードはhttp://html5doctor.com/html-5-reset-stylesheet/であります！

HTML5 Doctor Reset CSSはEric Meyer's Reset CSSのv1.0を元に作られたものでありますよ。Eric Meyer's Reset CSSのv1.0は作られた時期が2008年2月12日なので、HTML5で追加された要素のスタイル宣言がなかったであります。HTML5 Doctor Reset CSSはそこにHTML5で追加された要素のスタイル宣言を追加しているであります。他にもいろんな要素に独自のスタイル宣言をしているであります！

ちょっと眠くなったので、ここからはビーバー殿にまかせてわたしは寝るであります。

2.5　normalize.css

プレーリーさんが寝てしまったのでここからはおれっちが説明するっす。

normalize.cssはそれまでのReset CSSに代わるReset CSSとして出てきたっす。それまでのReset CSSはブラウザが既定で適用するスタイルをほぼすべてリセットしていたっす。

normalize.cssは今までと違ってブラウザが適用するスタイルで使えそうなものは残しているっす。あとで説明するsanitize.cssやressと違って、作者の意見が無くて純粋にブラウザのスタイルを正規化しているっす*16。

ソースコードにはなぜその宣言をしたか書かれているので読むだけでも勉強になるっす。

2.6　sanitize.css

normalize.cssをNicolas Gallagherとともに作ったJonathan Nealが作ったReset CSSっす。Eric Meyer's Reset CSSやnormalize.cssなどを元に多くの人が書いたスタイル宣言を含んだのがsanitize.cssっすね。たとえばhtml要素にbox-sizing: border-box;を宣言して、ユニバーサルセレクタでbox-sizing: inherit;を宣言しているっす（リスト2.2）。こうすることで特定の要素に対してwidthやheightを宣言するときに値の計算がしやすくなるっす。

/**
 * 1. Remove repeating backgrounds in all browsers (opinionated).
 * 2. Add box sizing inheritence in all browsers (opinionated).
 */

*,
::before,
::after {
  background-repeat: no-repeat; /* 1 */
  box-sizing: inherit; /* 2 */
}

/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Add the default cursor in all browsers (opinionated).
 * 3. Prevent font size adjustments after orientation changes in IE and iOS.
 */

html {
  box-sizing: border-box; /* 1 */
  cursor: default; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

2.7　ress

最後はA modern CSS resetと名乗るressっすね。ressはnormalize.cssの宣言を引き継ぎつつ、Hard resetのようにユニバーサルセレクタを使ってすべての要素に対しmarginやpaddingを0にしているっす。またsanitize.cssと同じくすべての要素に対してbox-sizing: border-box;を宣言しているっす。こうする利点はsanitize.cssの説明を読んでほしいっす。フォームに関連する要素もA modern CSS resetと名乗るとおり、大胆にユーザーエージェントスタイルシートの宣言をリセットしているっす。