スタイルが適用されない?!

Webサイト作りをしているときに、いくどとなく、トラブルに見舞われます。
原因がわかれば、ごくごく初歩的なものから様々ですが、今朝はそんな話題から。

「スタイルが適用されない」原因についてです。

【たとえばこんな場合】

1.　全体的にスタイルシートが反映されない。・・・FireFoxやIE8（IE7では、どうだったでしょうか）
で、メニューバーの表示ボタンから「スタイルシート」→「スタイルシートを使用しない」とした時と同じ表示になった時

　　この原因は、ほとんどの場合、HTML文書（たとえばindex.html）の中の、
　　<header>内の外部スタイルシートへのリンクパスにかかわる間違い。
　　

  <link rel="stylesheet" href="./css/style.css" type="text/css" />

　　特に上の赤字部分のように相対パスで書いたば場合の間違いや、MovableTypeのカスタマイズ
　　の場合では、バージョンによってスタイル用テンプレートの収容場所が異なるため、手元でうっかり
　　別のフォルダに入っているスタイルシートを直していることも多いです。
　　CrecsentEVEでは、ツールの中に「相対パスの挿入」機能があるので、助かりますが、よくわから
　　ない場合は、絶対パスで記載するといいですね。

2.　大体はスタイルシートが適用されているのに、ある部分については、スタイル指定が効かない。

　　この現象が出たときは、ちょっとどうしていいかわからず困りました。
　　リンクパスは間違っていないし、変更したスタイルシートをアップするホルダも間違っていない
　　ことを確認し、ハタと気づきました。
　　適用されてるid名やclass名と適用されていないid名やclass名を確認して、スタイルシート上
　　の記載場所を追いかけてゆくと・・・
　　ありました。

　　．content-navi　｛
　　width：　200px；
　　margin-left　：100px；
　　■　← ここに閉じ括弧（"　｝　"）がない!!

　　．content-navi　a　｛
　　color：　#FF0000；
　　｝
　　　
　ゆえに、下のアンカーリンクの文字色以降のすべてのスタイルが適用されなくなっていたようです。

作業があわただしく進んだため、うかり余計なソースを削除する際に、閉じ括弧も削除してしまった

ようです。こんなこともあるんだなぁと、ようやくすっきりした気分。

つくづく、問題発生時の原因の切り分けという手法が大切だと再認識しました。

上記以外にも原因があるかもしれませんね。そのときは「問題の切り分け手法」で、

何とか解決するしかないですね。また、事例がありましたら、紹介したいと思います。