Nega Diary

趣味のWebデザインより。

• NN4 には CSS を読み込ませない（定石）
• ブラウザのデフォルトスタイルを殺す（定石）

  * /* 全指定 */
  {margin:0; padding:0; font-size:100%; font-weight:normal; font-style:normal; text-decoration:none; color:#適当; background:transparent;}

• img 要素に vertical-align:bottom; と border:none; を指定（定石）
• line-height は数値のみを指定（定石／em や % で指定するのは問題の元）
• width を指定した要素に padding と border を指定しない（旧 IE と互換モードへの対策）
• height を指定した要素に padding と border を指定しない（旧 IE と互換モードへの対策）
• float を指定した要素に width を必ず指定する（文法規則）
• float を指定した要素に margin を指定しない（IE が2倍値で描画する）
• float で回り込む要素の内容が少ないとき、回り込む側にも float を指定するか、高さを指定（IE6 対策）
• float した要素の下に隙間を作りたい場合、float した要素に margin-bottom を指定＋親要素に padding-bottom を指定（注：検証不十分）
• position:absolute; を指定した要素には margin を指定しない（注：検証不十分）
• position:absolute; を指定した要素にはなるべく width も指定する（定石）
• position:absolute; の基準として right と bottom は避ける（Opera6 を無視しない場合）
• position:relative; を多用しない（定石／たいていスクロールが重くなる）
• z-index を指定する要素には position プロパティで static 以外の値を指定（文法規則）
• マイナスの margin を指定した要素と背景画像を重ねない（IE で背景画像が切れる）
• background-attachment:fixed; を多用しない（定石／スクロールが重くなったり表示が乱れたり）
• overflow プロパティを使う場合 MacIE5 は諦める（特殊なケース以外では内容が消える）

経験則としてだいたい理解してるけど、やっぱちゃんとまとめておかないと忘れる。こういうのはすごく助かる。（後でプリントアウトしておこう）

・・・・・しかし、こういうのを見ると、cssを使おうという気が失せてくる。
特に、CSSバグリスト＠CSSバグ辞典スレッドの膨大なバグリスト。もう絶対css使わないかんね！という気持ちすら涌いてくる。
ブラウザ毎のcssの差異を気にしつつ、調整しつつデザインするぐらいなら、tableでガッツリとレイアウトしてしまう。
納期や製作コストが合わないからだ。そのコストをお客さんに説明し、負担してもらう勇気はない。

プロなら、cssをばっちり操って納期に間に合わせろ！と言われるかもしれないけれど、現実的じゃないのは、現場の人が一番分かってるんじゃないだろうか。

一応リンク：Macromedia - Dreamweaver : CSS を利用するメリット

結局、cssを使っていて問題がでる多くのケースは、段組の表現をしたい時で、marginやpadding、borderの問題でうまくいかない。
そういうときは素直にtableを使う。モンクアッカバーロバーロ！