CSSの基本を理解する #3
リセットCSS
各ブラウザにはデフォルトCSS(初期状態で適用されているCSSのこと)が適用されているが、ブラウザ毎に違う。 そのため、全く同じコードのHTMLを表示させてもフォントや行間など表示が異なる。 このブラウザが持っているデフォルトCSSを全て無効化し、ブラウザ間の差異をリセットしようと言う考え方がリセットCSSである。
全ての要素に対して自分でスタイルを定義する必要があるため、必然的にコーディングの量は多くなる*1一方で、ブラウザのデフォルトスタイルを気にしながら実装する必要がないためコーディングは楽になる。
YUI3
Yahoo! User Interface Libraryのreset.cssを使ったリセットCSS。
Eric Meyer Reset CSS
Eric Meyer氏によるリセットCSS。彼が提起したリセットCSSは、その後のリセットCSSに大きな影響を与えるほどのCSSらしい(今時点では何がすごいのかは理解していないけど)。 FjordのCSSチュートリアルでもこの「Eric Meyer's Reset CSS 」を使用している。
ノーマライズCSS
GitHub - necolas/normalize.css: A modern alternative to CSS resets
ブラウザのデフォルトCSSを活用しながら、ブラウザごとに異なる部分を補正するcss。全てリセットするリセットCSSとは違う考えのCSS。モダンブラウザ・スマホ・HTML5に完全対応している。難点としてはブラウザのデフォルトCSSの仕様を把握した上で実装する必要があること。
リセットしないUn-Reset CSS
全部リセットするのではなく、必要最小限のスタイルを上書きして使おうというスタイルのCSS。
どれを選ぶか
リセットCSSとノーマライズCSSのどちらを使えばよいかというと、それぞれのメリット、デメリットを考慮して選択する必要があるので一概には言えない。
コーディングスキルが高くない場合はリセットCSSのほうが使いやすいが、ノーマライズCSSはモダンブラウザ・スマホ・HTML5に完全対応しているメリットがある。 注意が必要なのは、途中でリセットcssからノーマライズCSSへ という切り替えはできない点(逆も)。
リセットCSSも調べてみるとだいぶ種類があるようだが、人気があるものはよく使われているものだと思うので、リセットCSSを熟知していない場合はとりあえず有名どころを使っておくと無難なのかもしれない。
*1:実際には上記のように用意されているものを使うことになるので、自分でコーディングする手間が増えるわけではないが。