いづいづブログ

アジャイルコーチになりたい札幌在住SEです。アジャイル札幌スタッフ&ScrumFestSapporo実行委員。Like:パクチー/激辛/牡蠣/猫/初期仏教

CSSの基本を理解する #3

リセットCSSノーマライズCSSについて学習した。

リセット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

GitHub - ixkaito/unreset.css: Unreset CSS restores browsers' default element styles which are reset by Eric Meyer's Reset CSS, YUI 3 Reset CSS, HTML5 Reset Stylesheet of HTML5 Doctor, or Tim Murtaugh's HTML5 Reset.

全部リセットするのではなく、必要最小限のスタイルを上書きして使おうというスタイルのCSS

どれを選ぶか

リセットCSSノーマライズCSSのどちらを使えばよいかというと、それぞれのメリット、デメリットを考慮して選択する必要があるので一概には言えない。

コーディングスキルが高くない場合はリセットCSSのほうが使いやすいが、ノーマライズCSSはモダンブラウザ・スマホHTML5に完全対応しているメリットがある。 注意が必要なのは、途中でリセットcssからノーマライズCSSへ という切り替えはできない点(逆も)。

リセットCSSも調べてみるとだいぶ種類があるようだが、人気があるものはよく使われているものだと思うので、リセットCSSを熟知していない場合はとりあえず有名どころを使っておくと無難なのかもしれない。

*1:実際には上記のように用意されているものを使うことになるので、自分でコーディングする手間が増えるわけではないが。