CSSレイアウトが崩れている時に試す10の処方箋

Google Technorati Buzzurl Digg Bloglines DRECOM niftyクリップ pookmark pingking Choix

2.うまくいかない部分のCSSがちゃんと機能しているか確認しましょう。
marginがmarinとかになっているなどのスペルミスは僕でもよくあります。
この場合はこちらの「CLEAN CSS」を使うと効率よく発見することができます。
CLEAN CSSはもともと、CSSのファイルサイズを軽減するためのツールなのですが、もしプロパティ名などが誤っている場合下のように明示してくます。

cap_float03.jpg

その他:first-letterなどは半角スペースが入っていないだけで機能しなくなるケースもありますし、
}(ブラケット)を閉じ忘れていたという事もよくあります。
こちらもDreamweaverで見ればミスしている箇所以降、文字が真っ青になるのでわかります。

4.不具合のある箇所の要素にborderをつけ領域を明確にしましょう。

floatを使用している場合によくトラブルが起きます。
自分では正しい思っている(むしろブラウザが間違っている場合が多いので)だけに意外と発見できない人が多いのが曲者です。
そういった場合には崩れている箇所にborderをつけてみましょう。

こんな風な場合(極端ですが)↓
cap_float01.jpg

あきらかに横幅の設定ミスだとわかりましたね↓

cap_float02.jpg

ここまでのフローで原因を特定できない場合はこれ以下のチェックを行ってみて下さい。

引用ページはコチラ

6.floatを指定した要素にはwidthを指定しているか確認する。

現状の仕様ではfloatした要素にはwidthを指定しないと不具合の原因となります。
内包する要素がなんであろうとwidthを指定して下さい。
ちなみにwidthを適当につけたいとき、pxよりemの方が融通が利きます。

7.floatを指定した要素にmarginやpaddingを指定していませんか?。

floatを指定した要素にmarginやpaddingを設定するとIEでは2倍で描画されます。
hackを利用してIEに別の値を設定するか、marginやpadding自体設定しないようにします。

追記:
floatした要素のdisplayプロパティをinlineにする事でも回避する事ができるそうです。

8.floatした要素が足して100%になっていないか確認する。

モダンブラウザではあまり問題はないのですが、
floatしている要素にたとえば左50%+右50%の指定を指定してしまうと段組がずれてしまいます。
99%以下になるように修正してください。

9.もしかしてデフォルトスタイルをリセットしていませんか?

ブラウザによって表示が違う場合デフォルトのスタイルを放置しているかもしれません。
マージンやパディングはブラウザによって解釈が違うのですが、
はじめにリセットしていない場合、後から修正したらサイト全体に影響を及ぼすことになるので、
修正したい箇所だけにひとまずマージンやパディングを0に、
リストならリストのスタイルをnoneに設定します。


10.ちゃんとDTD入れてます?

ここまでの方法をすべて試しても不具合の原因を特定できない場合、
根本的な解決が必要だと思います。
とりあえずDTDが入っているか否かを確認し、
入っていない場合はとりあえずですが以下の一行をHTMLの一番上に貼り付けて下さい。

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

以上簡単に10個のチェックを書きました。
このステップでチェックしたからと言って100%のバグをフォローできるわけではないのですが、大切なことは不具合が出た時にパニックに陥いることなく合理的にデバッグできる事です。
上の方法はひとつの例にすぎませんがこれらを利用してトラブルへの適合性を養っていってもらえればと思います。