Webサイト構築メモ CSS設計について

2ヶ月ぶりの更新に･･･。

商品としてのWebサイトを構築していく中で、
作業の手戻りや、「ここをこうしておけばよかった！」ということが良く発生するので、
これから使うべく自分ルールをメモ。

CSSは、基本ルール＋拡張ルールで作る。

各タグに、基本的なルールをつけます。
h1の見た目、pのマージン・行間など、タグに基本的なルールをつけた後、
同様のルールを別のクラスにもつけます。

制作をしていく中で、マークアップとしてはh2だけれど、見た目としてはh1、大見出しとして見せたいことがあると思います。
そのような時、タグに対してしかスタイルをつけていないと、「見た目」という観点から、本当はh2の箇所をh1としてマークアップしなければなりません。
（現場では、SEO対策だったり、デザインを優先させるためにマークアップを犠牲にしなければならないことがよく起こります。）
それを解消するため、タグのほかに、別個、クラスにも同様のスタイルを適用しておきます。

ソース例：
h2,
.heading02
{ selector:property; }

クラス名のほうにはタグ固有のスタイルを打ち消す記述が必要になります。
多少冗長になるのですが、個人的にあまりクラスやIDをつけたくないので･･･。

また、
#contents .section .heading02
というように、子孫セレクタを使って書かないように心がける。
div.section h2.heading02
タグ名＋クラス名という組み合わせでも書かない。
汎用性を持たせるためです。

印刷時、残しておきたいものは画像（imgタグ）で生成

CSSで背景画像として作ったものは、基本的に印刷画面で表示されません。
コンテンツの中で、情報として必要なものは必ず画像化しておくこと。
リストのビュレット（●とか■）を背景画像にしているときは、
印刷用CSSでlist-style-imageで指定をすると、表示してくれるようです。

役に立つdisplay:inline-blockとheight:1%

floatやpositionを使うコンテンツには何かと上記を指定することが多いです。（マイナーかも。うちの会社ではほとんどお目にかかれず。）
以前、慣れないzoomプロパティを使って構築をしたら表示崩れがひどかったので、以後使っていません。（こっちはうちの会社で多発してます。）
高さを固定する必要のないフロートコンテナに関しては、height1%を指定。
positio:relativeに指定したボックスに関しても、幅と高さを固定したくない場合は、height:1%で。
また、display:inline-blockもheight:1%;と同じように色んなところで使います。
IE6系にはさほど影響が出ず、Firefoxには効果てきめんなときが何度かあるので利用してます。

こういう時はどうしますか？の対応

• 文字サイズが大きくなったら、文字の量が増えたら、この見出しはどうなるんだろう。
• 画面サイズが大きいと、背景画像どうなるんだろう。

などの疑問を洗い出しておいて、先に聞いておくこと。
後からそういうことだったのか！となると、時間的にも、精神的にも負担がでかいです。

• 文字が大きくなったらどうするか
• 画面サイズが大きく（小さく）なったらどうするか
• コンテンツの高さがウィンドウサイズより短かったらどうするか
• 画像とテキストが横並びになるとき、テキストは回り込むか否か
• 印刷CSSは作るか、作るならどこを印刷してどこを消すか

他、ちいさなことですが

• どこがロールオーバーするか
• フォントの指定があるか
• 文字色・リンク色まわり

も大事です。

命名規則を揺らさない

基本的なことですが、CSSまた画像名も、命名規則を揺らさないこと。
構築前に「このルールでいく！」と決めたら、横道にそれないこと。
色んな名前のクラス・画像ファイルが混在して混乱のもとに。

特殊な指定はコメント入りの方がいいかも

私の場合のheight:1%にあたります。
たとえば、自分の書いたCSSで不具合があって、別の人に修正依頼が来るとき、
原因は分かったけれど、それが本当にいらないものなのかどうかは、設計した本人にしかわからないもの。
自分しかわからなさそうなプロパティの指定には、コメントを入れようかと思ってます。

ブラウザバグ関連もろもろ

よく悩まされるのは、背景画像リピート＋コンテンツセンタリング。
Firefoxだと、センタリングしたときに絶妙（1pxレベル）な誤差が出るらしく、表示の調整にかなり苦労した覚えがあります。
・ちょっとズレても大丈夫なように、背景画像を余裕を持って指定しておく。
・Firefoxバージョン専用ハックを使ってごまかす。
ことで乗り切りました。

IE6のフロートマージン2倍バグはご周知されてる通りですね。
floatボックスにfloat側と同じmarginを指定する場合は、display:inlineで回避。

あとは、IE6にてマージン相殺のバグがあるので、
マージンは上下、左右のどちらかにしか指定しないようにするとか。

また、「スラッシュハック」なるものが社内でマイナー公開されていました。プロパティの前に『/』をつけることで、そのプロパティがIE6と IE7にしか聞かなくなるというスグレモノ。
でもまだ実践で使ったことないです

---

今日は時間がないのでここまで・・・。

今まで、『マークアップとデザインの分離』とは、ただ単に、
「太字にするためにstrongを使わない」
「目立たせるためにh1を使わない」
「CSSはHTMLに直書きせず、別ファイルで管理する」
ことだと思っていました（その意味も含まれると思いますが）。

商品としてのWebサイトを構築してきて、気付いたのは、
「マークアップに対してスタイルをつけるんだ」ということ。
スタイルのために、マークアップの妥当性を犠牲にしないということ。

もちろん、今までもそれを意識して作業してはいたけれど、
本当の意味で理解していなかったんだということに気付いたのです。

タグに対して固定のスタイルをつけてしまうと、デザインを見て、タグを入れるという作業になってしまう。
運用作業をこなす中で、『こういう見た目が欲しいから、このマークアップを使うしかないか。』と感じたことが何度もありました。

スタイルのことは考えず、マークアップしていって、相応のクラスをつけてデザインの調整をする。
マークアップしている間は、デザインのことは気にしなくていい。
デザインは後からクラス名をつけることによっていくらでも調整がきくのですから。
『マークアップとデザインの分離』ってこういうことなんだ、と今さらながら初めて理解できました。

今回のメモは、WebDesigning4月号のOOCSSの記事が発端でした。
その記事を見て、自分はこんな方向性でいきたいなと思ったのでメモしてみました。