初心者にとって、
「あれ?CSSが反映されない、、、なぜだ?」
という時はめちゃくちゃある。
大体は凡ミスなことが多いのだが、慣れていないとなかなかその凡ミスに気づけないのだ。
そのため、CSSが反映されない時のためのチェックリストを備忘録のために記録しておきたい。
CSSが反映されない時にチェックリスト
- <header class="test">とHTMLに記述する時の=(イコール)を:(コロン)やー(ハイフン)などの別記号にしてしまってないか?
- CSSで.test{~}と記述する時の.(ピリオド)を忘れてないか?
- 同じタグにclassを2つ設定する時の書き方が間違っていないか?
- HTMLやCSSのファイルの保存を忘れていないか?
- キャッシュが残っていないか?
- .test{border:solid;}と書く時の;(セミコロン)を書き忘れていないか?
- .test{color:red;}と書く時の }(閉じカッコ)を書き忘れてないか?
- floatの解除を忘れていないか?
- スペルミスをしていないか?(class="control"をcontorolとスペルミスしてなにも反映しなかったことがある)
信じられないだろうが、これは私が実際にCSSが反映されなかった時にやってしまっていたミスなのだ(笑)
CSSが反映されないという時は、ぜひ参考にして欲しい。
関連記事はこちら!
【CSS】行間を調整するなら line-heightプロパティを使う
【CSS】リンク(aタグ)の下線を消したい場合はtext-decorationを使う!