【CSS】CSSが効かない・反映されないときの対処法まとめ

はじめに

こんにちは。エンジニア（コーディング）のタクヤです。

サイトを作成してるときに、CSSが効いていない・うまく反映されていない…ことってありますよね。

CSSはブラウザで確認してもエラーが出ないので、問題の原因がわかりずらいので、特に初心者の方はそこで躓いて多くの時間を費やしてしますことがあると思います。

そんなときのために、CSSが効かない・反映されないときのチェック方法と解決策をまとめました。

CSSが効いていない・うまく反映されていないというときは、ブラウザでHTMLやCSSをチェックする必要があります。
その際絶対と言っていいほど使うのが、デベロッパーツール(検証機能)です。

ブラウザに表示さたページのHTMLやCSS等のコードを細かにチェックできるものです。
各ブラウザに標準で搭載しており、HTMLの構造やCSSのふるまいをチェックできるだけでなく、テキストを変えてみたり、CSSを当ててみたりとコーディングする際には欠かせないものとなっています！

今回はChromeのデベロッパーツールを使用します。

デベロッパーツールは、ブラウザ上で「fn + F12」で起動できます。Windowsの方は「F12」です。
他にもいくつかショートカットがあるみたいなので調べてみてください。

起動したら、
チェックしたい問題のありそうなHTMLを選択します。

CSSをチェックすることができます。

CSSが効かない・反映されないときに限らず様々な場面でこのデベロッパーツールは使用するので、使い方は覚えておきましょう！

CSSが効いてない・うまく反映されていないときの対処法を紹介していきます！
上から順番に1つずつ原因を潰していきましょう！

デベロッパーツールの説明をしましたが、まずはキャッシュをチェックしてみましょう。

キャッシュとは、ブラウザのデータを一時的に保存したもので、表示スピードを上げるなど閲覧する際にとても便利な機能です。
そんな便利機能のキャッシュですが、ブラウザをリロードしても保存された古い内容が表示されるケースがあります。

そんなときはスーパーリロードをするといいです。
方法は、「Command + Shift + R」です。（Windowsは「Ctrl + Shift + R」）

スーパーリロードすることで、キャッシュを削除してブラウザを更新しましょう。
キャッシュを更新するだけでCSSを反映されることもあるので、まずはこれを試してください。

反映させたいCSSがブラウザデフォルトのCSSやそれまでに記載したCSSに優先度で負けているパターンがあります。
優先度によって当てたいCSSが別のCSSに負けているのでCSSの指定方法を変える必要があります。

優先順位を上げるには、セレクタをより詳しく指定する必要があります。
詳細度を強くするということです。

詳細度は下記のようになっており、基本的にそれぞれの足し算の合計値によって決まります。
詳細度の値が大きいほど優先度が高いということです。

CSSのプロパティに当てる「!important」はこれらを無視して最優先されますので、それにも注意です。

セレクタの優先順位についてのより詳しくまとめました！
こちらもチェックしてみてください！

参考
詳細度についてhttps://blog.to-ko-s.com/css-specificity/

HTMLに記載したクラス名やid名をスタイルシートに誤って記載してしまうことがあります。
デベロッパーツールでチェックするとCSSの箇所にスタイルがあたっていません。

コーディングをしていると誰しもが、コピペミスや記載ミスがあるのでそこを疑ってみましょう。

プロパティに対して「!important」を指定することで、そもそもCSSがあたっている確認をしてもおすすめです。

CSSの記述量が多くなると、同じクラスやidに関するCSSが重複してしまうことがあります。
CSSは上から順番に読み込まれるため、スタイルシート内で後で（下で）書いているものの方が優先して反映されます。

CSSのプロパティに対して「!important」を指定していると、あらゆる優先度を無視してそのスタイルが最優先されます。
そのため、基本的に「!important」は使わないようにするのがいいです。
記載したCSSに「!important」と記載されていないか確認してみてください。

CSSを記述するときに、{} : ;を使用しますが、その使用方法の間違いや過不足があるとうまく反映されません。
こちらも念の為チェックするのがいいです。

そもそもスタイルシートがHTMLに読み込まれていないパターンがあります。
そもそもスタイルシートをを読み込んでいないとCSSが反映されないので、そちらも念のため確認しましょう。

こちらもプロパティに対して「!important」を指定することで、そもそもCSSがあたっている確認をしてもおすすめです。

コーディングあるあるの「CSSが効かない・反映されないときの対処法」を解説してきました。
もしCSSが反映されなくても、必ずどこかしらに原因があるので、焦らずにひとつひとつ原因を潰していきましょう。