2011.01.25xoopsズープス

CSSの規則について

■全体規則　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

* 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 height
* width を指定した要素に padding と border を指定しない（旧 IE と互換モードへの対策）
* height を指定した要素に padding と border を指定しない（旧 IE と互換モードへの対策）

■margin

* マイナスの margin を指定した要素と背景画像を重ねない（IE で背景画像が切れる）

■float
* float を指定した要素に width を必ず指定する（文法規則）
* float を指定した要素に margin を指定しない（IE が2倍値で描画する）
* float で回り込む要素の内容が少ないとき、回り込む側にも float を指定するか、高さを指定（IE6 対策）
* float した要素の下に隙間を作りたい場合、float した要素に margin-bottom を指定＋親要素に padding-bottom を指定（注：検証不十分）

■position　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
* position:absolute; を指定した要素には margin を指定しない（注：検証不十分）
* position:absolute; を指定した要素にはなるべく width も指定する（定石）
* position:absolute; の基準として right と bottom は避ける（Opera6 を無視しない場合）

* position:relative; を多用しない（定石／たいていスクロールが重くなる）
* z-index を指定する要素には position プロパティで static 以外の値を指定（文法規則）
■background
* background-attachment:fixed; を多用しない（定石／スクロールが重くなったり表示が乱れたり）
* overflow プロパティを使う場合 MacIE5 は諦める（特殊なケース以外では内容が消える）