リセットCSSって??

Twenty Tenのstyle.cssを見ると、

=Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html

というコメントで始まる部分があります。

Twenty TenのCSSにコメント入れてみた 長いから前半までねでちょっとだけ触れましたが、この部分がいわゆるリセットCSSになります。

このリセットCSSっていったいどういうものなんでしょうか。

CSSを使うわけ

少し前までは、ブラウザでページを表示させるために、デザインも、コンテンツも、何もかもごちゃ混ぜの様な状態でHTMLを書いていました。

でも、それでは分かりにくいよ、という事で、HTMLの方には基本的にコンテンツなどを順序よく、文脈がきちんと分かるように記述し、デザインなどの指定はCSS(Cascading Style Sheet(カスケーディングスタイルシート))に分けて書こうよ、という事が勧められるようになったのです。

HTMLがとてもすっきりする事、それによって検索エンジンなどのロボットも情報を拾ってくれやすくなる事、などが主なメリットとしてあげられると思います。

そして、何よりもメンテナンスのしやすさ。デザイン部分が別にまとめられているので、HTMLの変更も、デザインの変更もとっても楽です。

ブログを書く人なら、同じ内容で、デザインをがらっと変えられる、その気楽さに一番の良さを感じるかもしれないですね。

いい事ばかりじゃない

HTMLとCSS、いい事だらけの様ですが、実はいい事ばかりじゃないです。

同じ事を指定しているのに、WindowsだったりMacだったりするだけでも見た目が違います。IE、Firefox、Chrome、Safari、Operaなどなど、ブラウザによってなぜかCSSの解釈が微妙に違ったりします。ブラウザ固有のバグもあります。同じブラウザでもバージョンが違うとまた違ってきたりもします。また、ページを見ている人のモニターの大きさなど、環境も様々です。

このブログを読んでくれている方も、きっと頭を悩ませたことがあるのではないでしょうか。

私も、何度眠れぬ夜を過ごした事か。
まあ、これはCSSそのものが悪い訳ではないんですけどね。

ブラウザの初期CSS

ブラウザによってCSSの解釈が違うのですが、その他に、もうひとつ厄介なことがあります。

それは、初期設定されたCSSの解釈。全く何も指定していなくても、例えば「h1」とあったら、どのくらいのフォントサイズで表示して、どのくらいマージンとって..など、ブラウザの方で見やすいようにしてくれる訳ですが、これがまたまたブラウザによって違うのです。

先ほどの例でいうと、「h1」を20pxと18pxで表示する2種類のブラウザがあったとして、フォントサイズを80%にしてね、とお願いした場合を考えるとどうでしょう。結果が違ってきますね。
その他にも同じように見える余白部分が、ブラウザによってマージンだったり、パディングだったり、ということもあったりします。

このような事が、無数に重なってくると、「どうして思う通りに表示してくれないのよ、ムキーッ!」となってしまうわけです。

リセットCSSの登場

この「ムキーッ!」を少しでも減らせるように考えられたのが、リセットCSSです。「とりあえず、そのような独自の設定をいったんリセットして、スタート地点をそろえてから、改めてスタイルを設定していったら、楽なんじゃない?」という感じです。

このおかげで、かなりCSSを組んでいくのが楽になります。すてきですね。

Twenty TenのリセットCSS

Twenty TenのリセットCSSはEric Meyerという人が考えたものをもとにしています。コメントに始めに引用したように書かれているのです。これは、このリセットCSSを使うなら、ありがとうの気持ちで残しておくとよいと思います。

様々なリセットCSS

リセットCSSは他にも色々なものが考えられています。

例えば、少し前の記事ですが、コリスさんの所で、ブラウザのスタイルをリセットするスタイルシート集としてまとめられています。
他にも検索すると、いろいろなリセットCSSがありますから、試してみて、使いやすいものを選ぶとよいと思います。

ちなみに私は、普段CSS Happy Lifeや CSS Happy ZEROを運営なさってるHirasawaさんのdefault.cssをこっそり参考にさせて頂いてます。

リセットしてもだめなものはだめ

リセットCSSを使えば、ブラウザによる違いは無くなるのか、というと、そう簡単にいかないのが悲しい所です。やっぱり、細かな違いはありますし、嫌になるくらいバグも多いです。

それをどうにかするためにCSSハックなどという手もたくさん考え出されています。

色々覚える事も多いCSSですが、まずは、書いてみる。違ったら調べる、書き直してみる、そうやって手を動かしているうちにだんだん分かってきますし、勘も働くようになります。どこで妥協するか、もだんだん自分ルールができてくるものだと思います。

習うより、慣れろ、くらいの勢いで、まずはがんがん書いてみるのがいいかな、と思います。
楽しいカスタマイズライフを!

コメントをどうぞ♪