CSSが効かない原因とその対処法を解説!

CSSを更新しても「ブラウザ上でスタイルが効かない!」といった経験は誰しも一度はあります。今回の記事ではCSSが効かない場合の原因と対処法について解説しています。

コンテンツ [表示]

  1. 1CSSが効かない原因とその対処法
  2. 1.1原因1. CSSファイルが読み込まれていない
  3. 1.2原因2. スタイルの優先順位の問題
  4. 1.3原因3. CSSがコメントアウトされている
  5. 1.4原因4. CSSの文法エラー
  6. 1.5原因5. キャッシュが原因で更新されていない
  7. 1.6原因6. ブラウザ依存で効かないスタイルを指定している
  8. 2まとめ

みなさんはCSSを更新していざWEBページをブラウザで開いた際に「CSSが効かない!!」といった経験はないでしょうか?

この記事ではCSSが効かない原因とその対処法について解説していきます。

CSSが効かない原因とその対処法

CSSが効かない原因は複数考えられます。ぜひ順番に確認してみて下さい。

原因1. CSSファイルが読み込まれていない

HTMLファイルでCSSファイルが読み込まれていないために、CSSが効いていないという原因です。

確認方法

Chromeのディベロッパーツールや、ソースコードを見て該当のCSSファイルが読み込まれているか確認しましょう。

Chromeのデベロッパーツールは下記のショートカットキーで立ち上げる事が出来ます。

デベロッパーツールのショートカットキー

[Windows]
Ctrl + Shift + I

[Mac]
Command + Option + I
ChromeのデベロッパーツールのNetworkタブ
開いた画面の「Network」のタブをクリックしましょう。すると該当のHTMLで読み込まれているファイルが表示されます。

この中に目的のCSSが正常に読み込まれている(ステータスが200)事を確認しましょう。
(一度デベロッパーツールを開いてからリロードするといいです)

対処法

上記の手順でもしもCSSファイルが読み込まれていない(表示されない・404エラーなど)時はHTMLのCSSファイルの読み込み箇所を確認してみましょう。

HTMLファイル内のCSSの読み込み

  <link rel="stylesheet" href="CSSファイルのURL">

原因2. スタイルの優先順位の問題

こちらが一番CSSであるあるの問題です。対象のHTMLのタグに対して、複数箇所のセレクタでスタイルが指定されていて、その優先順位の問題でスタイルが効かないパターンです。

確認方法

Chromeのデベロッパーツールで、該当するタグが優先順位の問題で上書きされていないか確認しましょう。

デベロッパーツールの開き方
まずは調べたい箇所をブラウザ上で右クリックします。

そのあと「検証」を選択しましょう。
スタイルの上書きされている例
すると該当の箇所がフォーカスされた状態でデベロッパーツールが立ち上げあります。

Stylesの箇所で目的のスタイルが上書きされていないか確認しましょう。上書きされている場合スタイル上に斜線が引かれています。斜線が引かれているスタイルは無視されている状態です。

対処法

CSSのスタイルの優先順位の見直しを行いましょう。その上で適用したいスタイルのセレクタの優先度を上げる対応をしていきましょう。優先度を上げる方法については下記の記事を参考にしてみて下さい。

あわせて読みたい
CSSのスタイルの優先順位のルールと優先度を上げる方法を解説!のイメージ
CSSのスタイルの優先順位のルールと優先度を上げる方法を解説!
CSSではスタイルの指定が複数あり重複しているときに優先順位を考える必要があります。CSSの優先順位のルールと優先度の上げ方について解説していきます。

またこちらは最終手段ですが、!importantを付けて強制的にスタイルを適用させる方法もあります。念の為こちらの方法も下記の記事で紹介しておきます。

あわせて読みたい
CSSでスタイルが効かない場合の最終手段「!important」の書き方を解説!のイメージ
CSSでスタイルが効かない場合の最終手段「!important」の書き方を解説!
CSSで「!important」を記述したスタイルはCSSの優先順位を無視して、強制的に適用されます。今回は「!important」の書き方とそれでもスタイルが効かない場合の対処法を紹介します。

原因3. CSSがコメントアウトされている

目的のスタイルがコメントアウトされていて、スタイルが適用されていない可能性があります。よくあるのがCSSでのコメントアウトで、「閉じを忘れる」パターンです。

今一度見直ししてみましょう。

コメントアウトの閉じ忘れ

.header {
  background-color: blue; /* 暫定対応
  color: white;
}

確認方法

ご自身で該当箇所に検討がつけばそこを直せばいいですが、そうじゃない場合はCSSの文法エラーのチェックツールで検出できることがあります。

下記のサイトではCSSの文法チェックができおすすめです。

CSS Lint
CSS Lintの実行結果(コメントアウト閉じ忘れ)
コメントアウトの閉じ忘れのCSSで文法チェックをかけてみました。するとエラーが検出されました。

対処法

コメントアウトの閉じ忘れの箇所がもしあれば、コメントアウトの閉じを追加しましょう。

もしCSSのコメントアウトの書き方を復習したい方は下記の記事を参考にしてみて下さい。

あわせて読みたい
CSSでコメントアウトする方法と書き方を解説!のイメージ
CSSでコメントアウトする方法と書き方を解説!
CSSでコメントアウトする方法と書き方を紹介していきます。CSSのコメントアウトの書き方はHTMLとは異なりますので注意が必要です。

原因4. CSSの文法エラー

CSSで文法エラーが起きている場合も同様にスタイルが効かない場合があります。文法エラーについては先程の原因と同じく下記サイトで検出できますので、ぜひ一度試して見ましょう。

確認方法

下記サイトにアクセスし、該当のCSSをコピペして文法チェックをかける。

CSS Lint

対処法

CSS Lintで文法エラーとなった箇所を修正する。

原因5. キャッシュが原因で更新されていない

WEBページでは一度読み込んだ画像やCSSをブラウザやWEBサーバー上に保存しておくキャッシュという機能があります。このキャッシュ機能によりCSSがいつまでたっても更新されない可能性があります。

確認方法

キャッシュは

  1. WEBサーバーのキャッシュ
  2. ブラウザのキャッシュ
  3. AWSのクラウドフロントなどサービス側のキャッシュ
などいくつかパターンがあります。

まずはスーパーリロードを試してみましょう。このやり方で上記の「2」のパターンの確認が取れます。

スーパーリロード

[Widnows]
Ctrl + Shift + R

[Mac]
Command + Shift + R

これでCSSが適用できていればいいですが、出来ない場合はCSSファイルの呼び出しで適当なパラメータを加えて、CSSが更新されないか試してみましょう。

適当なパラメータを付けてCSSファイルを呼び出し

<link rel="stylesheet" href="style.css?param=20201023">

例えば上記例ではstyle.cssのCSSファイルをparam=20201023というパラメータをつけて呼び出ししています。

こうすることで、リクエストがキャッシュから外れて呼び出される可能性が高く、これで更新されていれば「WEBサーバーのキャッシュ」「CloudFrontなどサービス側のキャッシュ」の問題だと判断が出来ます。

対処法

上記で確認できた対象でキャッシュの削除を行いましょう。

またキャッシュの削除が難しければ、今後のリクエストでも適当なパラメータを付与する形にするという対応もありかと思います。

原因6. ブラウザ依存で効かないスタイルを指定している

ブラウザによっては対応していないCSSのプロパティが存在しています。ブラウザが対応していないためにスタイルが効いていない可能性もあります。

確認方法

下記サイトでCSSのプロパティのブラウザの対応状況が確認出来ます。

Can I use... Support tables for HTML5, CSS3, etc
border-imageの対応状況を「Can I Use」で確認
例えばborder-imageというプロパティの各ブラウザの対応状況を調べた結果です。(2020年10月23日現在)

緑で表示されているのは対応しているブラウザですが、そうではなない色の箇所では対応していないか条件付き(ベンダープレフィックス付き)であれば対応しているという状況が確認出来ます。

対処法

ブラウザが対応していないタグであればどうしようもありません。代替手段を考えましょう。

またベンダープレフィックスをつければ動作するのであれば、つけるようにしましょう。例えば「border-image」であれば下記のようにベンダプレフィックスを付けます。

border-imageにベンダープレフィックスを付ける

.header{
	-webkit-border-image : url(hoge.png) 10 10 stretch ;
	-o-border-image : url(hoge.png) 10 10 stretch ;
	border-image : url(hoge.png) 10 10 stretch ;
}

まとめ

いかがでしたでしょうか?CSSが効かない原因と対処法を紹介してきました。

今回はCSSが効かない場合でよくあるケースについて紹介しましたが、こういう経験を何度かしていくと自然と経験値がたまり次からは同じ失敗はしにくくなっていきます。

ぜひ経験値を積むための勉強だと思って、CSSが効かない問題へ対処してみて下さい!

そしてこの記事の内容でもしもCSSが効くように改善できたとしたらとてもうれしく思います。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次