ＣＳＳエラーの見分けかた！
【Ｗｅｂデザイナー講座で実際に起こった出来事】
ある受講生の方から先生ＨＥＬＰです！
受講生：なんだかＣＳＳのクラス「top」が全く反映させません。
講師：むむ！
.intro{color:#336699}
.honbun{width:700px;margin-right:auto;margin-left:auto}
.photo{float:left;margin-right:10px
.top{clear:both;text-align:right;border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:#336699}
.top a{text-decoration:none}
Ｄｒｅｍｗｅａｖｅｒのデザイン画面で見ると、正常表示。
講師：Ｄｒｅｍｗｅａｖｅｒのデザイン画面って、
あんまり、あてにならんから・・・
でも、実際に表示するとクラス「top」が全く反映されずダメ。
皆さん原因がお分かりになりますか？
答えは・・・
しばらく、受講生と画面をにらめっこ！？
■まずは、スペルチェック
１）スペルミスのチェック
講師：今回無し、実験しましょ。
◆エラーの見つけ方
現在の表示される結果から推測する。
２）今回ダメなクラス「top」の以降のクラスは有効か？
講師：正常に動作しますね。
↓
と言うことは、原因は、前の行？
３）１行前のクラスをチェック
クラス「photo」が正常に動作する。
しかし、直後のクラス「top」が無視されているのなら
講師：やはり・・・クラス「photo」の最後の「｝」が
抜けている。
これだと、クラス「photo」に
クラス「top」が飲み込まれてしまいます。
厄介なのは、クラス「photo」が正常に
動作する事に、安心しないこと！
.intro{color:#336699}
.honbun{width:700px;margin-right:auto;margin-left:auto}
.photo{float:left;margin-right:10px}
.top{clear:both;text-align:right;border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:#336699}
.top a{text-decoration:none}
「｝」が抜けていますね。
講師：よかったですね。でも、分かりにくいですね。
でも、苦労した方が、記憶に残りますので、
同じ現象が出たらは、今後、ピーンと来るでしょう。
結論：後ろの行が正常なら、原因は前の行に有り。
「｝」の抜けに注意しましょう！
講師：いやー、ＣＳＳめ。やってくれますね(^_^;)