コーディング作業をしていてcssが効かない…という経験は私を含めコーダーの方なら必ずあると思います。
その原因はうっかりミスから複雑なものまで様々です。
そして、通常ならすぐにミスを見つけることができますが、たまに何が原因でスタイルが反映されないのか全くわからなくなってしまい、時間を無駄に使ってしまうこともあります。。
ということで、今回はcssが効かない原因や解決法を私なりにまとめてみたので、困った時に参考になればと思います。
また、レスポンシブデザインのcssについては、こちらの記事もぜひ参考にしてみてくださいね。
cssが効かない…！
記述ミス
これが原因の場合ならすぐに解決するんですが、意外と気付かない場合もあります。
それは、こちらのように気付きにくいスペルミスの場合や、
.wrap {paddign:10px;}
id、classを表す#や.（ドット）が抜けている場合や、
wrap {paddign:10px;}
スペースが全角になっている…などが私の場合だと多い傾向にあります。。
.wrap {padding:10px;}
記述ミスだとcssがひとつもWeb上に反映されることはないので、すぐにおかしい…と気付くと思いますので、この辺りのミスを疑って確認してみましょう。
そして、この記事を書いている途中で気付いたんですが、idやclass名って日本語なんかも使えたんですね！全くそんなこと考えもしなかったので知りませんでした。。
実際には使うことはないと思いますが…余談までに。
id、class名が重複している
これはコーダーとして特に気を付けなければいけないところなので、重複しないような工夫はしていると思います。
しかし、cssファイルを共同で作業する場合なんかは重複してしまうことも考えられます。この場合もcssファイル内で検索してみるとすぐにわかるので念のため確認してみましょう。
ちなみに重複してしまったスタイルで、同じプロパティが設定されていることがありますが、この場合は後から書かれたスタイルが優先（上書き）されます。
私は重複しないように、後から追加・修正などでcssを編集する場合は、編集した日付なんかをクラス名の最後に付け加えたりしています。
そして、できれば使用していないスタイルに関してはコメントアウトしておいて、後程バックアップしたタイミングで消去したりしてなるべくわかりやすい記述を心がけています。
優先順位によるスタイルの無効
これは、実は最近ハマった例で。。cssの記述によっては優先されてしまう場合があり、うまく反映されないことがあります。
私の場合、tableのヘッダーthにテキストを折り返さないwhite-space:nowrap;を設定していたことを忘れ…その注釈としてツールチップを出すようにしていたんですよね。
そのツールチップのテキストがどうも折り返してくれなくて。。!importantの指定やその他word-wrapを試してみたり…何をやっても反映されませんでした。
これがきっかけで、色々と調べてみるとcssにはセレクタによって優先順位があることに気付きました。
私の場合は少し話が異なりますが、white-space:nowrap;（折り返さない）vs word-wrap:break-word;（折り返す）で、常に折り返さない方が優先されていたようです。。
そして、今回調べてみてはじめて知ったんですが、下記のようにセレクタによって優先順位が異なるんですね。
Examples:
* /* a=0 b=0 c=0 -> specificity = 0 */ LI /* a=0 b=0 c=1 -> specificity = 1 */ UL LI /* a=0 b=0 c=2 -> specificity = 2 */ UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */ H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ #x34y /* a=1 b=0 c=0 -> specificity = 100 */ #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
また、こちらも端的によくまとめられています。
と言っても、これを利用してcssを記述する方はいないと思いますので、こんなことも影響されるということを理解しておいて、cssが効かなかった場合に確認するひとつの方法として覚えておくと良いかもしれませんね！
は〜…色々と勉強になった1件でした。。
cssが効かない時の解決法
これは、私が実際にコーディング作業をしていてcssが効かない…と思った時に上記でご説明したもの以外で試してみる解決方法です。
それは…何と言っても、cssが効かない“犯人”を探してみることです。
その方法は簡単で、cssをざっくり消去してアップします。そして、同じく反映されていないようならその部分ではないということで、他の箇所を消して…と繰り返して検証していきます。（html側で試してみることもあります。※念のためバックアップはとりましょう。）
この確認作業中は、表示が崩れたりもするので場合によってはテスト環境や、仮のページを用意する必要があります。
そして、大抵の場合はこれで原因を突き止めることができます。
そこで、cssが効かなかった理由が判明します。これを繰り返していくことでミスのないコーディングができるようになるはずです。
私はいつもこの方法で原因を探っています。ぜひぜひ試してみてください！
まとめ
cssが効かない原因について簡単にまとめてみましたが、みなさんはどんな原因で効かなかったことがありますか？恐らく、今回ご紹介したもの以外にもcssが効かなかった原因は数多く考えられると思います。
そして例えば、marginの相殺などは今回のように原因を探ることでmarginのtopとbottomをあまり混在しない方が組みやすいな！といった自分の中でのコーディングルールを決めることもできます。
このように、cssが効かない場合にちゃんと原因と理由を確かめていけば、どんなブラウザにもある程度、同じ表示ができるようになるはずです。
ということで、cssが効かない時こそ勉強になるはずなので色々と調べてみてくださいね！
