CSSといえば最近ではWEBサイトを作成する上では必須な言語です。HTMLと同じくらい使われています。さて、最近仕事でこのCSSで苦労した事があるのでそれを記録として残したいと思います。この問題は今後もでてくる可能性があるので同じような現象になった人は参考にしていただけたらと思います。

問題点

まず今回の問題は、一部のスタイルが効かなくなるというものでした。今回僕が担当したサイトは複数のスタイルシートを使っていました。問題のスタイルシートもスタイルが効いているページがあり読み込まれていました。ディレクトリ構造も問題なく他のページと同じで効いてもいいのに効かなかったのです。

スタイルの設定が悪い？

問題が起きたCSSは『D.css』というファイル名とします。このD.cssの一部分が効かないという現象が置きました。実際にCSSは反映されている。HTML側にIDをつけてもいるけど効いていない。そこでfire bug というFirefoxのアドオンを使い該当する部分が効いていないか確認をしました。

スタイルは本来そこにはID付きの設定したスタイルが入っていないと行けないのですが、そこにはデフォルトで設定されていたスタイルが入っています。実際にスタイルの設定を見てみました。このときは背景画像をだすスタイルでした。

h2#sample {
 text-indent:-100em;
 background: url(images/画像名png);
}

このスタイルが全然効いていなくて困りました。IDは違うだけで同じ書き方で他の画像はでているけど、一部だけ読み込まれないという事でした。

原因の特定ができなかった

最初は何が原因なのかわからず、ひたすら書き直したりスタイルの位置（行数）を変えたりしていました。ネットでCSSが読み込まれるには行数の制限があるのかなと思って調べました。しかしそんなのはなかったです。あるいはコメントをいれたことで何かバグがでてそのせいなのかなとも思いました。しかし、コメントを削除しても直りませんでした。

HTMLのID名が間違っている可能性もあると思い、CSSのID名をこコピーしてそのままペーストもしました。それでもスタイルはききませんでした。一体何が原因なのかが特定できずに、がむしゃらに1%でも可能性があるなら全部それをやってみようと思いました。具体的には

等自分の中で可能性が1%でもあるのは全部考えてためしました。このやり方がいけなかったです。原因も特定しないで何時間も思った事を調べて検証する。しかし、原因は見つからない。そこで、一度リセットをしてみようと思いました。

特定のスタイルを疑うのではなく、ファイルに書いてあるスタイルを疑う

僕はD.cssの一部が効いていない=その部分が悪い。 このように勝手に決めつけていました。重点的にそのスタイルの部分だけを見ていましたが全然だめでした。なので、『本当に自分の書いたスタイルが間違っているのか？』と、まずは設定したスタイルを疑う事にしました。この検証は簡単です。効いていないCSS(プロパティ名:サンプル)をコピーして別のスタイルに貼付けました。このとき、僕はbase.cssというのに貼付けました。そうしたら、コピペしただけのスタイルが見事に効きました。
背景画像が表示されたのです。

これはとても重要な事です。自分が書いたスタイルは間違っていなかったのと、そのスタイルに問題はないという事が同時に証明されたのです。つまり、効いていない原因は他にある。D.cssの中にある別の何かが原因げ効かない現象を起こしているという事をしりました。

;←つけ忘れている可能性を疑う

CSSのルールの一つに、必ず終わりに『;』をつけるというルールがあります。実はこれが無いのではないかと今度は疑いました。僕がここで変えたのは人為的なミスの中でも、画像のパスの間違いとか文字の間違いとかではなく、スタイルの一部に何か閉じ忘れ見たいなのがあり、そいつが原因で今回のような事になっているのではないかと疑いました。

このとき、『;』をテキストエディタで検索してカウントしました。数は400以上です。

h2#sample {
 text-indent:-100em;
 background: url(images/画像名png)  ←/* こんな感じ */
}

しかし、これも違いました。つけ忘れがなかったのです。全部終了はされているからこれではないとなりました。この時はもう完全にテキストエディタで『;』の部分を強調表示して見ました。次に疑ったので原因が確定しました。

原因：『}』の閉じ忘れ

次に疑ったのが、CSSは『{』で始まり『}』で終わる事です。『{』の数と『}』の数が同じではないといけないことになります。実際に検索をかけたら、『{』は244個でした。そうなると『}』も244あればOKという事になります。実際に検索したら『}』は242個とでました。

足りないのです。二個足りないのです。原因が特定できました。人為的なミスによる『}』のつけ忘れです。もうここまでこれば簡単です。テキストエディタで『}』だけを強調表示して、無い部分を見つけるだけです。

h2#sample {
 text-indent:-100em;
 background: url(images/画像名png);

h2#sample2 {
 text-indent:-100em;
 background: url(images/画像名png);
}

実際にこんな感じの部分が二つありました。これが原因ですこのせいで設定したファイルの一部が効いていない現象になりました。しかも、全く関係のない問題なく本来は表示されるスタイルが表示されないという事でおきました。

反省点

人間なので、ミスはします。問題なのはミスをした人をみつけたりするのではなく自分がもっと早く視野を広くもってスタイルを疑っていればもっと早く解決したと思います。けどそれができなくげ自分で全く違うとこを原因と思い勝手に検証していました。なので、こんな現象がおきたらまずは特定のスタイルだけではなく、そのファイル全部に書いてあるスタイルを疑う。次に『{』や『}』の個数が同じなのかを確認する。これだけでも大きな違いになると思います。

もしCSSで似たような問題になった人がいたら視野を広く持っていただければ解決も早いと思います。そして、原因さえわかれば恐れるものは無いです。