お問い合わせ
お問い合わせ
ホーム > CSS > CSSが反映されないときの原因と対処法まとめ

CSSが反映されないときの原因と対処法まとめ

CSS
CSSが反映されない原因と対処法をイメージしたアイキャッチ画像（コードエディタとWebページの図）
CSSが反映されないときに考えられる代表的な原因をイメージ化したアイキャッチ画像です。

Webサイトを制作していると、CSSが反映されずにデザインが崩れたまま表示されることがあります。CSSが反映されない原因は幅広く、読み込み設定の不備からキャッシュの問題、記述ミスまでさまざまです。本記事では、よくある原因と対処法を体系的にまとめています。

1. CSSファイルが正しく読み込まれていない

まず確認すべきは、CSSファイルが正しく読み込まれているかどうかです。

起こりやすい原因

  • パスの指定ミス
  • ファイル名の入力ミス
  • ディレクトリ配置の間違い
  • WordPressの場合、wp_enqueue_style() の書き方の誤り

確認ポイント

  • ブラウザのデベロッパーツールで Network タブを開き、CSSファイルが 200 で読み込まれているか確認
  • WordPressの場合は、テーマ編集時に誤って functions.php を書き換えてしまったケースも多いため、読み込み設定も確認

関連記事

CSS読み込みの基本は以下で詳しく整理しています。
➡ wp_enqueue_style / wp_enqueue_script の基本
➡ WordPressでテーマファイルを編集する方法

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

ブラウザは表示速度を上げるために以前のCSSをキャッシュします。そのため、更新後のCSSが反映されないことがあります。

対処法

  • 強制リロード（Windows：Ctrl＋F5、Mac：Cmd＋Shift＋R）
  • ブラウザのキャッシュ削除
  • CSSファイルにバージョンをつける（例：style.css?ver=20231101）
  • WordPressの場合は wp_enqueue_style() の第4引数でバージョン管理が可能

関連記事

➡ CSSリセットの基本｜ブラウザ差異をなくす方法

3. CSSの記述ミス

細かい記述ミスが原因でスタイルが適用されないこともあります。

よくあるミス

  • セレクタの綴りミス
  • {} の閉じ忘れ
  • ; の書き忘れ
  • 不正なプロパティ名
  • コメントアウトの閉じ忘れ

対処法

  • エディタのシンタックスチェックを活用
  • 一度コメントアウトしてどこで崩れているか切り分け
  • W3Cのバリデーションチェックを利用

4. セレクタの優先度（Specificity）の問題

スタイルが読み込まれていても、別のCSSが優先されて上書きされている場合があります。

よくあるケース

  • より強いセレクタ（ID・!important）で上書き
  • 同じプロパティが別ファイルで後から読み込まれている
  • CSSフレームワークやプラグインCSSが強いスタイルを持っている

対処法

  • セレクタの優先順位を見直す
  • 必要に応じてクラス名の粒度を調整
  • 意図しない!important の使用箇所を削減

関連記事

➡ CSSでメディアクエリを使う方法

5. CSSが別のメディアクエリに入っている

メディアクエリ内に記述したCSSが、画面サイズに一致していないと反映されません。

よくある例

@media (min-width: 1024px) {
  .header {
    background: red;
  }
}

→ スマートフォンでは反映されない。

対処法

  • メディアクエリの条件を見直す
  • PC用・SP用の記述が重複していないか確認
  • 特定のデバイスのみ反映されない場合はクエリの順番も確認

関連記事

➡ CSSでメディアクエリを使う方法

6. キャッシュプラグインの影響（WordPress）

WordPressではキャッシュプラグインが古いCSSを保持し続けることがあります。

起こりやすいプラグイン例

  • Autoptimize
  • WP Super Cache
  • LiteSpeed Cache など

対処法

  • プラグインのキャッシュ削除を実行
  • 圧縮設定を一時オフにして動作を確認
  • CSSが結合されている場合はどのファイルが反映されているか確認

関連記事

➡ WordPressプラグインの更新と削除方法【安全な手順】

7. テーマやプラグイン側のCSSが上書きしている

テーマの標準CSSやプラグインが読み込むCSSが強力で、独自CSSが効かないケースがあります。

対処法

  • 読み込み順を確認（自作CSSは最後に読み込むとよい）
  • セレクタの粒度を少し強める
  • 子テーマでカスタマイズする方法も有効

関連記事

➡ 子テーマの作り方とfunctions.phpを安全に編集する手順

8. 外部CSSの読み込み制限やCORSの問題

CDNから読み込むCSSの場合、CORS設定が原因で読み込めないケースがあります。

対処法

  • CDNステータスを確認
  • SSL（https）で統一されているか確認
  • 別のCDNに切り替えて動作をテスト

9. ブラウザの拡張機能や独自設定の干渉

AdBlockなどの拡張機能が特定のCSSをブロックすることがあります。

対処法

  • シークレットモードで表示する
  • 拡張機能を一時オフにして確認
  • 別ブラウザで表示して問題を切り分ける

10. サーバー側のキャッシュやCDNの遅延

ConoHa WING や CloudflareなどのCDN・キャッシュが古いCSSを配信し続けることがあります。

対処法

  • サーバーキャッシュをクリア
  • CDN側のキャッシュ削除
  • キャッシュを一時オフにして挙動を確認

まとめ

CSSが反映されない原因は、パスの問題から記述ミス、キャッシュの残存、読み込み順、テーマやプラグインとの競合など、多岐にわたります。ひとつずつ切り分けながら確認すると、問題点を特定しやすくなります。
特にWordPressでは、テーマ構成やキャッシュプラグイン、functions.php の設定など複数の要因が絡むため、基本設定を正しく理解することが重要です。

CSSが問題なく反映されるようになると、WebデザインやWordPressカスタマイズの作業効率も大きく向上します。