CSSが反映されない原因と対策5選｜初心者がつまずくポイントを解決！

本記事には広告が含まれています

2025/04/162025/04/19

CSSが反映されない原因と対策5選｜初心者がつまずくポイントを解決！

「スタイルシートを書いたのに見た目が変わらない…」
HTMLとCSSを学び始めた人なら、一度はぶつかる悩みではないでしょうか。
この記事ではCSSが反映されない代表的な5つの原因と、その具体的な解決策を分かりやすく解説します。
開発現場で実際に起こるトラブルを例にしながら説明するので、ぜひ参考にしてください。

CSSファイルの読み込みミス

原因

link タグの href 属性でパスを間違えている
ファイル名のタイプミスや拡張子忘れ
ローカルと本番でディレクトリ構成が異なる

対策

ブラウザの開発者ツールで Network タブを開き、CSS ファイルが 200 で取得できているか確認
相対パスと絶対パスを使い分け、<link rel="stylesheet" href="/css/style.css"> のように先頭スラッシュを付けるとルートから解決できる
WordPress なら wp_enqueue_style() を用い、テーマ直下の style.css を正しく登録する。たとえば、以下のように functions.php に記述します。

function my_theme_enqueue_styles() {
  wp_enqueue_style('my-style', get_stylesheet_uri(), array(), filemtime(get_stylesheet_directory() . '/style.css'));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

セレクタの優先度（Specificity）負け

原因

同じ要素に複数のスタイルが当たる場合、詳細度（Specificity）が高いルールが勝ちます。

対策

できる限り クラス名 を軸に設計し、ID での装飾を避ける
!important 連発はメンテナンス性を損なうため、まずはセレクタ設計を見直す
Chrome DevTools の Styles パネルで、取り消し線が付いているプロパティを確認し、どのルールに負けているか特定

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

原因

CSS を上書きしても、ブラウザが古いファイルをキャッシュから読み込むと変更が反映されません。

対策

強制リロード（Windows: Ctrl + F5 / macOS: ⌘ + Shift + R）でキャッシュを無視
link タグにクエリ文字列を付与し、バージョン管理：
<link rel="stylesheet" href="style.css?v=20250415">
WordPress の wp_enqueue_style() 第四引数にファイル更新日時を渡し、自動でキャッシュバスターを付ける

CSS の構文エラー

原因

セミコロン抜けや中括弧の閉じ忘れ
コメントアウトの /* と */ が不一致
プロパティ名や値のスペルミス

対策

VS Code などのエディタで 拡張機能 (ESLint / Stylelint) を導入し、保存時に静的解析
ブラウザの Console に表示される「Unexpected token」エラーを確認
小さな変更をこまめに保存・確認し、エラー発生箇所を早期に特定

外部ライブラリやテーマによる競合

原因

Bootstrap や Tailwind などのフレームワークを読み込むと、既定のリセットやユーティリティが自作 CSS を上書きする場合があります。

対策

自作スタイルを <link> ではなく <style> タグで下に書く、または読み込み順を後ろに回す
フレームワーク側のクラスを確認し、.my-btn.btn のように詳細度を高めて衝突を回避
可能なら不要な CSS を tree-shaking（未使用スタイルの削除）し、影響範囲を最小化。たとえば、PurgeCSS や Tailwind CSS の content オプションを使えば、使用されていないクラスをビルド時に自動削除できます。