CSSが反映されない7つの対処方法を徹底解説します！！

実はある程度慣れてきた人でも「CSSが反映されずにコーディングが進まない！」と困ってしまうことはよくあります。

なぜなら、CSSが反映されなくなる原因は複数あるからです。

この記事では、そんな困った時に見るべきポイントと、その対処方法をまとめています。

記事を読み終えると、ブラウザ反映されずにコーディングで詰まってしまう時間を短縮できるようになり、コーディングスピードも向上させられます！

CSSが反映されない時に確認すべき7つの項目

それぞれの確認方法と、その対処法をご紹介していきます。

CSSファイルが読み込めてない

全体的にスタイルが当たってない時は、HTMLのheadタグ内でCSSが読み込めていない可能性が高いです。

確認方法

HTMLのheadタグ内に、CSSファイルを読み込む記述が正しくされているか確認します。

<link rel="stylesheet" href="style.css">

対処法

• rel属性に「stylesheet」が記載されているか？
• href属性に読み込みたいcssファイルを指定しているか？
• 「○○○.css」のスペルが実際のファイル名と相違ないか？

このあたりをチェックしてみましょう。

パスの指定が間違っている

CSSのbackground-imageのように、パスを通してブラウザに表示させるプロパティの場合、ディレクトリのパスが誤っていることで反映されないこともあります。

確認方法

CSSファイルと、読み込みたいデータが置いてある、PCやサーバーのディレクトリ構造を見てみます。

対処法

パスの指定方法にはルールがあるので、分からない方はこちらの記事を先に読んでみてください。

• 同じ階層を指定： 「 ./ 」 　or　何も付けない
• 一つ上の階層を指定： 「 ../ 」
• 一つ下の階層を指定： 「 / 」

background-image: url(../img/bg/bg.svg);

ルールに基づいて、パスが指定されているか確認してみましょう。

スペルミス

こちらもCSSが反映しない原因としてはかなり多いケースです。

確認方法

CSSが効いていないクラスやHTML自体を把握できていない場合は、デベロッパーツールで特定することができます。

上のGIF画像のように、スタイルが適用していない要素をクリックすると、Style欄にCSSやクラスが表示されません。

<header class="ly_header">
<!-- ヘッダー -->
</header>

.ly_heade {
	background-color: #afc9c9;
}

あとはCSSが効いていない該当箇所の、HTMLとCSSファイルを並べてみます。

この時目視でスペルミスに気づければOKですが、気づけなかった場合の対処方法をご紹介します。

対処法

やり方の一つですが、HTMLから該当のクラス名をコピーして、CSSファイル上で検索してみます。

Ctrl+F（Macだったら⌘+F）でクラス名を貼り付けてヒットしなければ、HTMLに記述したクラス名がCSSファイルに無い＝スペルミスということになります。

”.” ”#”を忘れている

クラスの場合は「.」、idの場合は「#」を入れないとスタイルは反映しません。

確認方法

上のスペルミスのチェック同様、CSSが効いていないクラスやHTML自体を把握できていない場合は、デベロッパーツールで確認しましょう。

スタイルが適用していない要素をクリックすると、Style欄にCSSやクラスが表示されません。

対処法

特定したクラスやidの横に”.”や”#”がついていないか確認し、抜けていたら記述します。

一般的なエディターなら、要素セレクタで指定されるもの（HTMLのタグ）以外、「.」や「＃」が無いと文字色が変わります。

「.」や「＃」を頭につけることで、クラスやidと認識されるので、あとはブラウザとデベロッパーツールを確認してみましょう。

全角スペースが入ってしまっている

CSSを指定する際に、全角を入れているとスタイルは反映しません。

確認方法

全角で指定されている場合、テキストエディタの機能でプロパティの色が変わります。

対処法

全角スペースが入っていることがわかる拡張機能を入れるか、視認しやすいフォントを選びましょう。

VSCodeのインデント含め、視認しやすくしてくれる拡張機能もあるため、まだ知らない方はこちらの記事を参考に入れてみてください。

ブラウザのキャッシュが残っている

キャッシュとは、CSSのスタイルや画像データなどをブラウザが保存する機能です。

一度閲覧したWebページは、キャッシュにより、サーバーまで情報をとりにいかず表示させられるので、読み込み速度を向上させられます。

ただこの機能により、キャッシュに保存されているCSSが優先して表示されてしまうため、コーディングデータを更新しても表示内容が変わらないという状況が起こります。

対処法

スーパーリロードとは、ブラウザのキャッシュを無視して、強制的にサーバーからデータを読み取るリロード方法です。お手軽なので、コーディング中ならこちらの方をよく使います。

ブラウザや端末で若干やり方が違いますので、それぞれの方法を紹介します。

スーパーリロード（Windows）

スーパーリロード（Mac）

キャッシュ削除方法

Chrome

Internet Explorer

Microsoft Edge

Firefox

Safari

iOS用 Safari

※cookieも削除されます

Android用 Chrome

セレクタの詳細度が競合している

セレクタの詳細度とは

セレクタの詳細度とは、スタイルが適用される優先度のことです。

セレクタの種類によって詳細度は異なるため、考えずに記述していると思わぬところでCSSが効かない、といったことが起こります。

セレクタには以下の種類があります。

また、それぞれのセレクタには点数があり、この大きさで詳細度が決まります。

詳しく知りたい方はこちらを。

詳細度 – CSS: カスケーディングスタイルシート | MDN (mozilla.org)

確認方法

スタイルが効いてないセレクタよりも強い詳細度（点数）で指定されている、重複されたセレクタを確認します。

デベロッパーツールを開いてみましょう。

ly_header_containerクラスで指定した内容だけでスタイルをあてたいのですが、backgroundプロパティに横線が引かれています。

上のセレクタを見ると、同じタグに設定しているidセレクタ（#header）に記述しているCSSの方が適用されているのが分かります。

この時、#headerが100点、.ly_header_containerが10点のため、同じプロパティがあれば#headerのCSSで上書きされてしまうということです。

このように、デベロッパーツールを見れば、スタイルをあてたい箇所で重複しているセレクタの確認をすることができます。

もし、セレクタが特定できても詳細度の違いが分からない場合は、こういったツールで確認することもできます。
Specificity Calculator

対処法

適用させたいセレクタの点数を上げます。

上の画像では、効かせたいセレクタの親要素にあるid セレクタを被せることで、詳細度の点数を110点に上げたことで、#headerのCSSを上書きしています。

このように、クラスセレクタや属性セレクタなど、使えるセレクタを組み合わせることで詳細度を調整し、適用するスタイルをコントロールすることができます。

※例のために使いましたが、idセレクタにCSSをあてることはあまりオススメできません！（詳細度が大きくなることでスタイルの上書き合戦が起こりやすくなり、管理が大変になるため）

セレクタ詳細度が原因の場合は、デベロッパーツールを見ないと判断できないことが多いです。

他の要因もデベロッパーツールで判断できることが多いので、迷ったらまずデベロッパーツールを確認する癖はつけておきましょう！

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。