どーも。最近密かに主婦に人気が有るんじゃないか？と思い始めているhirasawaです。
遊び心がある方、コレから「主婦CSS」とかって付けて下さい。えぇ。
主婦に優しいブログ運営を頑張りたいと思っておりますので。
【超CSS】STOPN' LISTENですに対抗したいとか、そんな大人気ない事思ってないデスヨ？
で、本題ですがCSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::の影響もあるんですが、会社関係の人に同様の事を言われた事が有り、いつか書こう書こうと思ってました。
でも、同じじゃアレなんで、ボクが良くやる（やった）初歩的なミス絡みで書いてみようと思います。
1.何か、コレだけスタイルが適用されないんすが…
ボクの場合、取りあえず !importantでそもそも効いているのかチェック。
もしくは、margin-bottom:10pxが効いてるか調べる時とか、margin-bottom:1000pxとかって入力してみる。
プロパティや値、セレクタ、class、id名のスペルはミスってない？
スペルミス関係が何気に一番多くて、意外とはまりやすいような。
；（セミコロン）が最後以外で抜けてない？
付ける癖が染み付いているハズなのに、何かの拍子で無かったり。
｝（ブラケット）が]や」になってたり閉じ忘れてない？
めっちゃ急いで書いてると、たまーにやってしまう。
個別性の計算は正しい？
自分で最初から組んだサイトならまだしも、人様が組んだサイトをいぢる時は個別性の計算が間違ってる場合があったり。
実はソレ、id（class）じゃね？
ぼーっとしてるとclass（.）で付けたか、id（#）で付けたか忘れてたり勘違いしてて、適用されてないって落ちが…
そのid（class）、適用させたいのと違うんじゃない？
例えば、#container #main .item .message って書いて、 .messageに適用させたいのに、親要素に .itemが無く、.itemの外だったりした場合。
コピって使おうとした時とかにいらないclass（id）が混ざっているというケース。
2.floatしないんすよー。
当然ながら1のミスを踏まえた上で、、、
width指定でか過ぎか、計算間違ってない？
paddingの計算を忘れてたりする場合があったり。そもそも計算ミスだったり。
widthの値を小さくするか、backgroundプロパティで適当な色をつけてチェック。
width指定忘れてない？
意外や意外、忘れるんです。
画像とかがでっかくない？
スタイルをチェックしてみても間違ってないのになぁ～って時、実は画像が1pxはみ出していたり。
それでも回り込まないって？
中身をごっそり消して、チェック。
回り込んだら、ちょっとずつ中身を入れていき、見つかるまで繰り返してみる。
3.floatした後に続く、縦marginがブラウザによって違うんです…
clearし忘れか、width指定忘れ辺りが大半の理由だと思うよ。
4.floatしたら、親要素に指定しているハズの背景が出なかったり、繰り返さないんだよぅ
IE、Firefox（以下：Fx）でも繰り返してなかったら、width指定忘れ＋clear忘れが怪しいんじゃね？
コレ参照↓するのもいいよ。
画像が消えたり、繰り返さなかったり系が解決しそうなこと
repeat-xとかno-repeatになってたりしない？
xとyはうっかり間違っちゃうってケースも無きにしも非ず。
xが横リピート、yが縦リピートや。
5.リストで画像を並べたらビミョーに隙間が出来ちゃうんです。
line-heightの影響を受けてるんじゃない？
Fxだとテキストが無くても、line-heightの計算をしっかりしてくれるから、line-height:1px;とかって指定して上げればダイジョブ。
font-sizeの影響を受けてるんじゃない？
逆にIEだとfont-sizeの影響で隙間が出るから、font-size:1px;とかって指定して上げればダイジョブ。
6.テキストが重なっちゃうの…
height指定してるんじゃ？
IE6でチェックを進め、いざFxでチェック！っていうパターンだと、heightの値より中身が大きい場合にテキストが重なったりしちゃうんよ。
仕様に沿ってるFxさんをベースに組むか、下手にheightを指定しないのが吉。
mixiとか見てると、Fxを基準に組め！っていう意見を多く見かけるけど、その後の書き方がちょっと違和感。
「FxでチェックしてIEはハックで対応すればOK」だけだと、ハックイッパイになってしまう気もする。
特にアンダースコアハックとかは使う必要性が無いから、
#hoge {
height:50px;
}
#main > #hoge {
height:auto;
min-height:50px;
}
みたいな感じで、子セレクタや隣接セレクタで対応した方がキレイ。
何気にボクはIEメインで確認してからFxやらOperaやらの確認をするタイプです。
基準に沿ってるブラウザさんなら、IEのバグから潰してもFxなどの表示は意図した通りになるかどーかが分かっていればどっちでもいいと思う。
び、ビルダーのどこでも配置モードとか？
サポート対象外です、ご了承くだｒｙ
7.バグだよ、バグ。オレが悪いんじゃない！
色んなサイト、ブログでバグ関係（特にIE）に関して書かれているし、実際IEのバグの数はすっごい多いんです。
多いんだけど、覚えたての人が意図した表示にならない＝バグと決め付けるのはちょっと気が早いと思うんよ。
バグだと思い込む前に、1で書いた事とかを確認してみると良いと思う。
8.こんなの読んだって、直らないんすけど！
http://stopnlisten.no.land.to/2007/01/css10.html
とかどうぞ。
眠い…
仮にも「社員ブログ」なのに、徐々に（前から？）間違った方向性（言葉遣い）になってる気がしないでもないけど、まぁいいか。
10個を目標に書こうと思ったんだけど、眠気に負けたのでお休みなさいzzz