- 学習を始めたての人
- CSSが効かなくて困っている人
「CSSを書いたのにHTMLに反映されていない」なんてことはありませんでしょうか。
そんな時に確認するべき点をお話しします。
パスが通っているか
ありがちで一番起こりやすいのがパスが間違っていることです。
パスが合っているか確認方法です。
CSSファイルに以下を記述してブラウザで確認してみましょう。
html {
background: red;
}色が変わらなかったらパスが通っていない可能性が高いです。
対応策
- CSSのファイル名が合っているか。
- HTMLに指定しているCSSのファイル名が合っているか。
- HTMLに指定しているCSSのパスの指定の仕方が合っているか。
クラス名が合っているか
次に多いのが、クラス名間違いです。
指定する要素のクラス名が合っているか確認しましょう。
クラス名のみならず、タグや、そもそもCSSを当てたい要素が違うなんてこともあります。
devToolを使用して確認しましょう。
対応策
- HTMLでつけたクラス名をコピーしてCSSに貼り付ける。
- devToolで要素が合っているか確認する。
詳細度が上書きされていないか
CSSには詳細度という概念があります。
ある要素にCSSを当てて、別の箇所で同じ要素にCSSを当てた場合にどちらが優先されるかということです。
詳細度については調べていただくとして、devToolでCSSが上書きされていないか確認しましょう。
対応策
- 詳細度を上げる。
- 上書きしているCSSの詳細度を下げる。
書き方に間違いがないか
単純なことですが、そもそも書き方に間違いがないか確認しましょう。
コロン忘れや、スペル間違い等起こりがちなので気をつけましょう。
対応策
- エラーを検知するエディタを使用する。
キャッシュは影響していないか
HTMLファイルのままではそんなに感じたことはないですが、キャッシュの影響でCSSを変更しても反映されないことがあります。
キャッシュを削除しないと反映されないので、キャッシュを削除するようにしましょう。
スーパーリロードと呼ばれる方法を使用するのがおすすめです。
macの場合、command + ↑ + Rを同時押ししてください。
windowsの場合、Ctrl + Shift + Rを同時押ししてください。
対応策
- スーパーリロードを行う。
それでも直らない時は
わかる人を探して聞いてください。
それが一番です。
周りにいない方は、Twitter等のSNSやteratail等の質問サービスで質問すれば、誰かが答えてくれると思います。
悩んでもわからないところは聞くしかありません。
めげないようにやっていきましょう。
それではまた次回お会いしましょう。