仕事の効率を上げる blog

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

上記ページにCSSでレイアウトが崩れてしまったときに試す10項目が紹介されています。

1. HTMLの閉じタグのミス、スペルミスをチェックしましょう。
2. うまくいかない部分のCSSがちゃんと機能しているか確認しましょう。
3. 不具合を起こしている箇所を特定しましょう。
4. 不具合のある箇所の要素にborderをつけ領域を明確にしましょう。
5. floatをネストした要素（floatしている要素の親要素）にclearを指定していませんか。
6. floatを指定した要素にはwidthを指定しているか確認する。
7. floatを指定した要素にmarginやpaddingを指定していませんか？。
8. floatした要素が足して100%になっていないか確認する。
9. もしかしてデフォルトスタイルをリセットしていませんか？
10. ちゃんとDTD入れてます？

人間頭の中で考え出すと余計な詮索が働き「○○なはず」とか考えてしまうものです。

このような脳内シミュレーション（デバッグ）で問題が解決することは、頭の良い悪いに関わらず非常に稀なので、自分なりのデバッグ技法を策定し、手を動かす癖をつけておくことをお勧めします。

実際にHTMLやCSSのデバッグを行う際はFireBugというFireFoxのプラグインが非常に便利です。