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

はじめに

この記事の概要

こんにちは。株式会社TOKOSのエンジニアのタクヤです。

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

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

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

対象となる方

• CSSを勉強中の方
• Web制作でコーディングをしている方

デベロッパーツール

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

デベロッパーツールとは

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

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

デベロッパーツールの使い方

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

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

すると選択したHTML要素に当たっているCSSをチェックできます。

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

CSSが反映されない原因と解決策

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

キャッシュが残っている

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

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

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

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

優先順位が低い

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

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

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

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

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

クラス名、id名がおかしい

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

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

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

スタイルシートのあとの行で上書きしている

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

デベロッパーツールで該当のCSSを確認し、打ち消し線が引かれているプロパティがあれば上書きされている可能性があります。重複しているCSSを削除するか、記述順を見直しましょう。

「!important」が効いている

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

セミコロンや波括弧が抜けている

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

スタイルシートが読み込まれていない

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

こちらもプロパティに対して「!important」を指定し、反映されなければ、CSSファイル自体が読み込まれていない可能性があります。

まとめ

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