2007年1月22日
CSSレイアウトが崩れている時に試す10の処方箋
私事で大変恐縮ですが、今月（1月）の20日をもっていままで勤めていた会社を退職いたしました。
今までは「ちょっと見てください」や「うまくいかないんで助けてください～」と一声かけてくれればその場でレクチャーできたのですが、
これからはそうもいかなくなるのでコーディングのレイアウトで躓いたときに皆が読めるようにチェックリストを作りました。
主に初心者を対象としていますが、意外と役にやつかもしれませんので一度読んでみてくださいね。
さて、具体的な処方箋は以下です。
1.HTMLの閉じタグのミス、スペルミスをチェックしましょう。
divの入れ子関係が崩れている場面は中級レベルでも多く見られました。
まずはdreamweaverでバリデートをかけ、黄色く警告がでていないか、意図した入れ子関係かしっかり視認確認をします。
2.うまくいかない部分のCSSがちゃんと機能しているか確認しましょう。
marginがmarinとかになっているなどのスペルミスは僕でもよくあります。
この場合はこちらの「CLEAN CSS」を使うと効率よく発見することができます。
CLEAN CSSはもともと、
CSSのファイルサイズを軽減するためのツールなのですが、もしプロパティ名などが誤っている場合下のように明示してくます。
その他:first-letterなどは半角スペースが入っていないだけで機能しなくなるケースもありますし、
｝（ブラケット）を閉じ忘れていたという事もよくあります。
こちらもDreamweaverで見ればミスしている箇所以降、文字が真っ青になるのでわかります。
3.不具合を起こしている箇所を特定しましょう。
ページ全体に影響を及ぼすような不具合（ナビのカラムが落ちているなどの場合）、
箇所を特定するには一度ブロック単位（適当な大きさのdiv単位）で削除してみます。
ブラウザで確認し、どこを削除すれば適切に表示されるか特定します。
4.不具合のある箇所の要素にborderをつけ領域を明確にしましょう。
floatを使用している場合によくトラブルが起きます。
自分では正しい思っている（むしろブラウザが間違っている場合が多いので）だけに意外と発見できない人が多いのが曲者です。
そういった場合には崩れている箇所にborderをつけてみましょう。
こんな風な場合（極端ですが）↓
あきらかに横幅の設定ミスだとわかりましたね↓
ここまでのフローで原因を特定できない場合はこれ以下のチェックを行ってみて下さい。
5.floatをネストした要素（floatしている要素の親要素）にclearを指定していませんか。
MacIEではネストした要素にclearが設定されていると左右などにfloatした要素が崩れてしまいます。
これは有名なバグですが、知らなければ対処のしようがありません。
知っている人は知らないひとに教えてあげて下さい。
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%のバグをフォローできるわけではないのですが
大切なことは不具合が出た時にパニックに陥いることなく合理的にデバッグできる事です。
上の方法はひとつの例にすぎませんがこれらを利用してトラブルへの適合性を養っていってもらえればと思います。
Sehr gute Seite. Ich habe es zu den Favoriten.
mm... strange )