コーディングしているときに、「あれ、CSSが効かねえ」って小ハマりすることありますよね。
・CSSファイルを更新したのに、反映されない
・CSSファイルが反映されているのに新規記述が読み込まれない
CSSが効かない原因はたいてい単純な問題なことが多いです。焦って無駄な記述を増やしてしまわないよう落ち着いてチェックしていきましょう。
初級〜中級者の方向けのチェック方法をご紹介します。
すんません、キャッシュじゃないですか？
ファイルを修正したのに、チェック担当者に「あれ、まだなおってないんだけど」と言われたら、まず疑うのがキャッシュです。WEBに疎い人は、なぜか毎回キャッシュのせいで騒いでいます。ブラウザのキャッシュをクリアしましょう。
他のキャッシュ対策テクニックとしては、ファイルを読み込む記述 href=”example.css” に引数を付けて href=”example.css?20160811″ とかにすれば別のファイルと認識し、新規のファイルとして読み込んでくれます。
まず、ファイルちゃんと読み込んでますか？
ファイルをちゃんと読んでいるかとりあえずチェックです。style.cssを読んでいるつもりが、記述がrel=”styl.css”になっていてファイルがそもそも読み込まれていないパターンです。また階層に関しても注意です。相対パス、ルート相対パス、絶対パスなどです。怪しい場合は、実際にブラウザにURLを入力して、ファイルが存在するか確認しましょう。
きみ〜、クラス名が違っているよ
結構やっちゃいますね。単純にIDの【#】とクラス名の【.】を間違えていたり、コピペミスで一部の文字が切れていたりします。
コラ！書式が間違っているよ
セミコロン【;】が抜けていたり、コロン【:】になっていたりの書式ミスもよくあります。
あとは全角文字列が入っていたり、コメントの入れ方が問題のケースもあります。
だめだよ。クラス名が数字から始まっている文字列
最近やらかしました。クラス名には数字は使えるのですが、先頭で使ってはいけません。たとえば、【100en-item】とかだといつまでたっても反映されません。５分くらい「あれー、あれー」状態でした。こんなときは【item-100en】とかにしておきましょう。
一番多いと思います。CSSの適用順序の問題
CSSには適用の優先度があります。ざっとあげると以下のようなルールです。
- 後から記述したほうが適用される
- クラス名指定よりID名指定のほうが優先度が高い
- 階層指定が深いほうが優先度が高い
- !importantは最強
まとめ
CSSが効かない原因はの適用順序の問題がほとんどじゃないでしょうか。それでもうっかり、上記のようなミスをしてしまうことがります。
お役に立てれば幸いです。
