原因が何かも分からず、CSSが反映されない。その原因究明に難航し、その結果として多大な時間を浪費してしまった経験はありませんか。
試行錯誤を繰り返しても結果が好転せずに問題を払拭できなくなることがなくなるよう、今回は良くあるCSSが反映されない原因5選を解説していきます。
CSSの使い方について不安に思う方はCSSの使い方、書き方を初心者でも分かりやすく簡単解説で詳しく解説していますので、参考にしてみてください。
それではCSSが反映されない原因について解説していきます。
1：単純なスペルミス
まずは単純なスペルミスです。これがCSSが反映されない箇所に存在しないか確認してみましょう。
『l』と『i』等のスペルミスは一見しただけでは分からないこともあるため
Macの場合はcommand+F
Windowsの場合はCtrl＋F
で検索をかけて探してみましょう。
単純なスペルミスの対策として、エディターにもよって変わりますが、予測変換のようにプロパティや値を記述することができるエディターが多く存在しています。
そのようなエディターの機能も活用しながら単純なスペルミスをなくしていきましょう。
2：無駄な半角スペース、全角スペース
次に確認することとして、無駄な半角スペース、全角スペースです。
CSSを綺麗に記述するためにも、有効な半角スペースは存在しますが、無駄な半角スペース、全角スペースがそこに紛れている場合があります。
これはスペルミス以上に見つけにくいため、
Macの場合はcommand+F
Windowsの場合はCtrl＋F
を活用して、検索をかけて探してみましょう。
しっかり確認したつもりでも見落としまいがちなミスの一つです。コードを記述している最中、思いがけないエラーが発生した場合は一度、確認した方が良い項目と言えます。
3：全角で記述されたコード
次に確認することとして、全角で記述されたコードがないか探してみましょう。
これは先述した2つよりは可能性としては低いですが、テキストを書いた後に、半角に戻すのを忘れてコードを記述してしまった場合などは全角で記述されたコードがあるかもしれません。
基本的にコードは半角で記述するルールがあるため、全角で記述するとCSSが反映されない原因となります。
4：CSSの保存を忘れている
CSSに限った話ではないですが、保存されていないコードが反映されることはありません。
CSSの記述に誤りがないのにも関わらず、CSSが反映されない場合、しっかりと保存されているかを確認しましょう。
このようなミスを無くすためにもコードを保存することを癖にすることが賢明と言えます。
コードの保存のショートカットキーは
Macの場合はcommand+S
Windowsの場合はCtrl＋S
で保存することが出来ます。
ブラインドタッチが出来ない場合、最初はそれぞれの位置を確認しながらの作業になるかもしれませんが、少しずつでも体に覚えさせていきましょう。
ショートカットキーに慣れてしまえば、同時に保存にも慣れていくのでこのようなミスは格段に減らすことが出来ます。
5：キャッシュが残ってる
これまでの確認事項を調べてもCSSが反映されない場合、キャッシュが残っているため、CSSが正常に機能しないことが考えられます。
今回はキャッシュについての説明は割愛させていただきますが、イメージとしては、バックの中身が大量に溢れて、それ以上の荷物という名のデータを入れられないような感じです。
詳しく知りたい方は調べてみてもいいかもしれません。
キャッシュを削除するショートカットキーは
Macの場合はcommand+R
Windowsの場合はCtrl＋F5
でキャッシュの削除が可能となります。
CSSが反映されずに焦ってしまう時があるかもしれません。でも、それはいたって初歩的なミスである場合も少なくありません。
この記事を参考にしながらCSSが反映されない原因を究明し、問題解決してみてください。
