なぜCSSが効かない？初心者がチェックしたい5つのポイント

CSSを書いたのに、

「あれ？全然変わらない…」

Web制作をしていると、こんなことがよくあります。

コードは合っているように見えるのに反映されないと、どこを直せばいいのか分からなくなりますよね。

今回は、CSSが効かないときに私が確認しているポイントを5つまとめてみます。

① スペルミスがないか確認する

まず確認したいのが、意外と多い単純な入力ミス。

.title {

  backgroud-color: green;

}

これではbackgroundの「n」が抜けているので反映されません。

プロパティ名だけでなく、

;を忘れていないか

{ }が閉じているか

クラス名が間違っていないか

なども確認します。

「絶対合ってる！」と思っているときほど、単純なミスだったりします

② HTMLとCSSのクラス名は同じ？

HTMLでは、

<div class="staff-card">

なのにCSSでは、

.staff_card {

  padding: 20px;

}

となっていれば、もちろんCSSは効きません。

-と_の違い、大文字・小文字なども要チェックです。

CSSだけを見るのではなく、HTML側のクラス名と見比べてみます。

③ 他のCSSに負けていない？

CSSには優先順位があります。

例えば、

.card {

  color: green;

}

#staff .card {

  color: black;

}

この場合、より詳細に指定されている#staff .cardの方が優先されます。

「CSSは書いてあるのに色が変わらない！」

というときは、別のCSSで上書きされていないか確認してみます。

Chromeの検証ツールを見ると、どのCSSが適用されているのか確認できるので便利です。

④ CSSの読み込み順を確認する

同じ優先度のCSSなら、あとから書かれた指定が優先されることがあります。

.button {

  background: green;

}

.button {

  background: pink;

}

この場合は、後に書いたpinkが適用されます。

CSSファイルが複数ある場合も、どのCSSが後から読み込まれているかを確認することが大切です。

⑤ キャッシュが残っていない？

そして、コードが合っているのに変わらないときに疑いたいのがキャッシュです。

ブラウザには、一度読み込んだCSSなどのデータを保存して、次回の表示を速くする仕組みがあります。

そのためCSSを更新しても、以前のCSSが表示されてしまうことがあります。

そんなときは、

スーパーリロードをする・キャッシュを削除する・別のブラウザや端末で確認する

などを試してみます。

私も実際のWeb制作で、

「PCでは新しいデザインなのに、スマホでは古いデザインが出る！」

ということがありました。

原因を探していったところ、キャッシュの影響だったことがあります。

コードだけでなく、表示環境を疑ってみることも大切だと実感しました。

まとめ

CSSが効かないときは、焦ってコードをどんどん書き換える前に、

スペルミス → セレクタ → 優先順位 → 読み込み順 → キャッシュ

の順番で確認してみると、原因を見つけやすくなります。

Web制作では「書く力」だけでなく、なぜ動かないのかを一つずつ確認する力も大切。

エラーに遭遇するたびに、少しずつ原因を見つけるのも早くなっていきます😊