BlueprintCSS をはじめ、スタイルシートの雛形が話題になっていたのですが、幾つかの制作会社に在籍していた経験から言うと、それぞれの会社には「フレームワーク」とまではいかなくても、それぞれのルールがあります。

まず個人的な言い方ですが、フォントサイズを絶対単位で固定しないといったコンセプトのことを「レギュレーション」と呼んでいます。それから、.css ファイルとして用意されている雛形のことを「フォーマット」と呼んでいます。

或る会社では有料会員サイトを運営していたのですが、Mac ユーザをターゲットから外していたので、当時は margin や padding のショートハンドが効かなかった Safari ではレイアウトがおかしくなるという、ヘンなフォーマットを使っていました。もともと会社の中で「これを使ってくれ」と言われて渡されたものではありますが、そのうち、フォーマットはそのままにしておいて、自分なりに margin-top: 20px; などと書いた値でオーバーライドするようになりました。

しかし、考えようによっては、自分なりに書いた「オーバーロード用のフォーマット」をいつもヘッド部で読み込んでいたので、これは業務の問題として解決しなければならないでしょう。デザイナーが単独でそのようなことをやると、レギュレーションの意味がありません。もちろん受託案件の場合は、クライアント側からフォーマットが提供されていることもあるので、なるべくフォーマットにしたがいつつ、問題のある箇所にだけ独自の値やプロパティを使っています。

それから違う会社では、いわゆる Web 標準のコーディングができるスタッフに不足していたので、テーブルレイアウト用のフォーマットを使っていました。業務としては、コーディングが僕だけ専任という案件では Web 標準に準拠していましたが、それ以外の案件では生産性などの要素を優先しなくてはなりません。もちろん会社でスキルを標準化するのも一つの手なのですが、それだけでは不十分と言えるのも事実です。例えば受託案件で、納品先の担当者に Web 標準のスキルを強要したりできない筈です。

次に、フォーマットの具体例をご紹介して、ひとまず自分なりにこだわっているところをご説明したいと思います。

…
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;
…

このような記述を、div や p などボックス要素に対して適用しています。-top, -right といった記述の順番は、ショートハンドの記述順と同じです。「上・右・下・左」となっています。また、そもそも僕が個人的に使っているフォーマットでは、ショートハンドを使うとデバッグの際に原因を特定しにくくなるので、ショートハンドは使いません。

また、レイアウトに div 要素を使うことは多いと思うのですが、div マニアと呼ばれないていどに他のブロック要素と使い分けておき、基本的に div 要素には margin, padding を使わないというレギュレーションを立てています。スペーシングしたいときは子要素の margin, padding で行い、特にブラウザのモードによってボックス要素の解釈が異なるため、水平方向には padding を使わないというのもあります。もちろん、JavaScript 有効であることが前提で作られているようなサイトでは、UA およびバージョンを判定して使い分けたりもするでしょうし、特定のブラウザだけで無効となるバグを利用したりもするでしょうが、これらも基本的にやりません。そういう意味では、仕事ではともかくとして、個人的にはリセット用途のフォーマットは使わないという Snook さんに同意できる点があると考えています。

その他、フォーマットではフォントに対して font-style: normal; を適用しています。特に、address 要素にスラントがかかると読みづらいという単純な理由です。また、5年くらい前にスタイルシートを使い始めた頃は a 要素に text-decoration: none; を適用していたのですが、初心者や高齢者はありありとした「いかにもリンク」に見える箇所しかクリックしないものだという指摘をもらって、現在も検討しているところです。

あーと。簡単に自己紹介を・・・macca, kgm と同じ会社で、管理本部が所属の事務屋さんですー。また機会があれば、PHP のデザインパターンについていきなりお話しするかもしれません。でわでわ。