BlueprintCSS に見る「リセット」という考え方について

BlueprintCSS は、冒頭でも述べた「リセット」用としてだけでなく、もともとはスタイルシートによるポジショニングを簡便にするための「フレームワーク」として公開されました。したがって、それぞれの制作会社で決めているレギュレーションやフォーマットも、同じような主旨で採用されたと思うので、比較して採り入れている事例もあると思います。ちなみに、レギュレーションは規約なのでルールとして文書化されていることを指し、フォーマットはそれに従って用意されている雛形ファイルのことを指しています。レギュレーションだけだと、実際にどう書けばよいか分からない人もいるため、実際に雛形ファイルを用意しておけば、はじめてレギュレーションに従って作業する人にも分かりやすく、生産性も上がるとされています。

BlueprintCSS の作成者である Olav Bjorkoy さんは、Jeff Croft さんが A List Apart で公開した「デザイナーのためのフレームワーク」という記事に触発されて BlueprintCSS を作ろうとしたと言っています。そして、Jeff さんの記事には、スタイルシートのリセットという着想が含まれていたことは事実なので、BlueprintCSS を「リセット用のCSS」だと捉えても大きく違ってはいないでしょう。ちなみに、昨今はカンニングペーパーが大流行のようで、BlueprintCSS 用のカンニングペーパーも公開されています。

このサイト（MarkupDancing）のソースをいちいちご覧になっている暇な方はいないと思いますが、僕もスタイルシートのリセットを採用しています。Blueprint ではありませんが、例えば次のようにスタイルシートファイルの冒頭に記述しています。

body, div, h1, h2, h3, h4, h5, h6, p, a, address, form, ol, ul, dl, li, dt, dd {
width: 100%;
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;
padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;
font-family: meiryo, ‘lucida sans unicode’, verdana, tahoma, ‘ms ui gothic’, osaka, arial, helvetica, sans-serif;
font-style: normal; text-align: left;
}

それほど複雑なことはやっていません。

さて、これだけを見れば特に問題もなさそうなのですが、少し前に Snook.ca で「CSS をリセットするなんて！」という記事があったのです。そこで、Snook さんが指摘している論点を列挙してみましょう。

まず、実はリセットできていない「リセット用 CSS」があるのではないかという問題があります。そして、それが実はブラウザのスタイルシート実装の差なのだというわけです。例えば、２年くらい前までは Mac の Safari はマージンやパディングのショートハンドが効かなかったので、僕はリセットするときに上下左右に必ず分けてリセットしていました。また、input タグについては id や class などの識別子を使わなければ一部のプロパティが効かないという現象があったので、長らくインラインのスタイル属性で書かなければなりませんでした。だからといって、input タグをリセットするためだけに、専用のリセット用スタイル指定を書き加えていくと、結局はハッキング・カタログになってしまうのではないかというわけです。

それから、昔の IE とそれ以外のブラウザに見られたボックスモデルの解釈の差は、たとえリセット用スタイルでリセットしたとしても、そこから一歩でも前に進んでボックス要素に margin や padding を適用すれば無効になってしまいます。それらのプロパティがどちらもゼロであるとき、そしてそのときにのみリセットが有効でブラウザの差を埋められるのですから、事実上は margin や padding プロパティが使えなくなるのと同じ事です。

ついでに Snook さんはデザイナーとしての意見を述べており、「たとえ異なるブラウザで多少は違って表示されようと、僕は構わない（I’m okay if the various browsers show things slightly differently）」と言っています。しかし、これはクライアントを予め説得すべきことかもしれませんし（品質保証の範囲なのかどうかは断定できません）、それ以前に目視で差があれば簡単にはウンと言わない紙媒体出身のデザイナーさんを、どうやって説得すればよいかも検討の余地があります。中には、リキッドレイアウトやエラスティックレイアウトを「邪道」と言ってのける人まで、未だにこの業界にはいるのです（デザイナーさんだけでなく、パワーポイントで作った「画面設計」に沿っていないという理由で可変レイアウトを嫌がるシステム屋さんもいますね・・・）。したがって、見栄えが違ってもよいし気にならないからリセットする必要がないというのは、まだプライベートなサイト制作についてしか言えないでしょう。

また、Snook さんは、このようなリセット用CSSというアイディアを「ウェブ標準」というテーマに含まれるものと考えているようで、ウェブ標準化の手続きと同じくスタイルのリセットも、「面倒なだけ（impractical）」と一蹴しています。確かに、現今のウェブ制作プロダクションや派遣社員あるいはフリーランサーに見られるスキルのばらつきを見ると、それぞれウェブ標準を語っている会社やサイトや雑誌・書籍はたくさんあるにしても、「さぁ僕らも標準にまで到達したぞ・・・で、次は？」という見通しを述べていませんし、そこまで到達するために何をやり、そしてどうなれば到達したことになるのかを殆ど明らかにしていないので、言ってみれば主導権争いに忙しい都会の仲良しクラブや、一部の（誰も実績を知らない）制作会社や雑誌のライターさんが勝手に言い立てている、俺流ウェブ標準こそ先に標準化すべきではないかと言いたくなります。

そして最後に、Snook さんは、リセット用のスタイルシートはあまりにもファイルサイズが巨大になりすぎていると指摘しています。例えば BlueprintCSS では、現在の最新バージョンである 0.7.1 だと、解凍した /blueprint フォルダのファイルサイズが 28.9 kB となっており、これに加えてオリジナルのスタイルシートファイルを使うわけですから、スタイルシートだけで合計 100 kB を越えるようなサイトがあるのもうなずけます。しかし、無駄なものはそれぞれで省いていけばよいわけですし、いまではボックス要素のコントロールに注意すれば、昔ほどブラウザどうしの差はなくなってきたので、もっとファイルサイズは減らして使えると思います。何にせよ、リセット用のスタイルというものは、希望的観測ではやがて無くなる運命にあるものなので、これから肥大化していくとは思えません。

ということで、それぞれの利用者が自分のコーディングに合わせて参考にすればよいという、実に平凡な結論に落ち着いてしまうわけですが（笑。あるいは、BlueprintCSS の記述を見ると、わざわざリセットしなくてはならない部分はここなのだという点を確認することにより、ブラウザの互換性を知るための手引きになるでしょう。しかしかなり怪しい記述があるのも確かで、印刷用のスタイルシートファイルを見ると、これはリセット用と言うよりも単なる趣味の問題でしかありません。もちろん、BlueprintCSS はリセット「だけのために」公開されているわけではありませんから、「この数値は趣味だ」と言われれば終わりの話なのですが。それにしても、line-height の 1.5 という数値に主観や適当な統計以上の根拠がない限り、このようなスタイル適用は趣味の問題でしかないと言えます。何の問題もなく無効にして、自分の決めた line-height 値を使えばよいでしょう。

スタイルシートを調べたり勉強している方には、このようなものが「フレームワーク」などという名称で呼ばれているからといって、身を構える必要はないと言えます。

そういえば、このサイトの Archive って IE8 の Standard mode 対応だったので、 IE7 の Strict mode にも対応させる「リセット用のスタイル」を書かないといけませんね。たぶん IE7 で見ると、記事が右に流れてしまっていると思います。