CSSが効かない原因とその対処法を解説！
CSSを更新しても「ブラウザ上でスタイルが効かない！」といった経験は誰しも一度はあります。今回の記事ではCSSが効かない場合の原因と対処法について解説しています。
みなさんはCSSを更新していざWEBページをブラウザで開いた際に「CSSが効かない！！」といった経験はないでしょうか？
この記事ではCSSが効かない原因とその対処法について解説していきます。
CSSが効かない原因とその対処法
CSSが効かない原因は複数考えられます。ぜひ順番に確認してみて下さい。
原因1. CSSファイルが読み込まれていない
HTMLファイルでCSSファイルが読み込まれていないために、CSSが効いていないという原因です。
確認方法
Chromeのディベロッパーツールや、ソースコードを見て該当のCSSファイルが読み込まれているか確認しましょう。
Chromeのデベロッパーツールは下記のショートカットキーで立ち上げる事が出来ます。
デベロッパーツールのショートカットキー
[Windows]
Ctrl + Shift + I
[Mac]
Command + Option + I
対処法
上記の手順でもしもCSSファイルが読み込まれていない（表示されない・404エラーなど）時はHTMLのCSSファイルの読み込み箇所を確認してみましょう。
HTMLファイル内のCSSの読み込み
<link rel="stylesheet" href="CSSファイルのURL">
原因2. スタイルの優先順位の問題
こちらが一番CSSであるあるの問題です。対象のHTMLのタグに対して、複数箇所のセレクタでスタイルが指定されていて、その優先順位の問題でスタイルが効かないパターンです。
確認方法
Chromeのデベロッパーツールで、該当するタグが優先順位の問題で上書きされていないか確認しましょう。
そのあと「検証」を選択しましょう。
Stylesの箇所で目的のスタイルが上書きされていないか確認しましょう。上書きされている場合スタイル上に斜線が引かれています。斜線が引かれているスタイルは無視されている状態です。対処法
CSSのスタイルの優先順位の見直しを行いましょう。その上で適用したいスタイルのセレクタの優先度を上げる対応をしていきましょう。優先度を上げる方法については下記の記事を参考にしてみて下さい。
またこちらは最終手段ですが、!importantを付けて強制的にスタイルを適用させる方法もあります。念の為こちらの方法も下記の記事で紹介しておきます。
原因3. CSSがコメントアウトされている
目的のスタイルがコメントアウトされていて、スタイルが適用されていない可能性があります。よくあるのがCSSでのコメントアウトで、「閉じを忘れる」パターンです。
今一度見直ししてみましょう。
コメントアウトの閉じ忘れ
.header {
background-color: blue; /* 暫定対応
color: white;
}確認方法
ご自身で該当箇所に検討がつけばそこを直せばいいですが、そうじゃない場合はCSSの文法エラーのチェックツールで検出できることがあります。
下記のサイトではCSSの文法チェックができおすすめです。
対処法
コメントアウトの閉じ忘れの箇所がもしあれば、コメントアウトの閉じを追加しましょう。
もしCSSのコメントアウトの書き方を復習したい方は下記の記事を参考にしてみて下さい。
原因4. CSSの文法エラー
CSSで文法エラーが起きている場合も同様にスタイルが効かない場合があります。文法エラーについては先程の原因と同じく下記サイトで検出できますので、ぜひ一度試して見ましょう。
確認方法
下記サイトにアクセスし、該当のCSSをコピペして文法チェックをかける。
対処法
CSS Lintで文法エラーとなった箇所を修正する。
原因5. キャッシュが原因で更新されていない
WEBページでは一度読み込んだ画像やCSSをブラウザやWEBサーバー上に保存しておくキャッシュという機能があります。このキャッシュ機能によりCSSがいつまでたっても更新されない可能性があります。
確認方法
キャッシュは
- WEBサーバーのキャッシュ
- ブラウザのキャッシュ
- 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のプロパティのブラウザの対応状況が確認出来ます。
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が効くように改善できたとしたらとてもうれしく思います。
この中に目的のCSSが正常に読み込まれている（ステータスが200）事を確認しましょう。
（一度デベロッパーツールを開いてからリロードするといいです）