MENU
  1. ホーム
  2. IT・ガジェット
  3. IT知識
  4. CSSが反映されない原因と対策10選｜初心者向けに切り分け方を解説

CSSが反映されない原因と対策10選｜初心者向けに切り分け方を解説

本記事には広告が含まれています
IT知識
CSS WordPress
しん@IT・開発・教育の専門家
CSSが反映されない原因と対策10選｜初心者向けに切り分け方を解説

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

先に結論を言うと、CSSが効かない原因のほとんどは「CSSファイルが読み込まれていない」「セレクタが要素に当たっていない」「別のスタイルに負けている」「古いファイルがキャッシュされている」のどれかです。どれに当てはまるかは、ブラウザの開発者ツールを使えば数分で切り分けられます。まずは次の「最初にやる切り分け手順」から試してみてください。

目次

CSSが反映されないときに最初にやる切り分け手順

闇雲にコードを書き直す前に、開発者ツール（DevTools）で「どこで止まっているか」を確認するのが近道です。Chrome・EdgeならF12キー（Macは⌘ + Option + I）、またはスタイルを当てたい要素を右クリックして「検証」を選ぶと開けます。

  1. Elements（要素）パネルで対象の要素を選び、右側のStylesに自分の書いたルールが表示されるか確認する
  2. ルールが表示されないなら、CSSファイルが読み込まれていないか、セレクタが要素に当たっていない（原因1・2・5・7）
  3. ルールは表示されるが取り消し線が付いているなら、別のスタイルに負けている（原因3・8・9）
  4. 取り消し線はないのに見た目が変わらないなら、そのプロパティが効かない条件になっている（原因6）
  5. 開発者ツールで見るCSSの中身が書き換える前のままなら、キャッシュが原因（原因4・10）

あわせて、Stylesパネルで値の横に黄色い警告マークが出ている場合は「無効なプロパティ値（Invalid property value）」、つまりスペルミスや書き方の誤りです（原因5）。

原因1：CSSファイルの読み込みミス

原因

  • link タグの href 属性でパスを間違えている
  • ファイル名のタイプミスや拡張子忘れ（大文字・小文字の違いも含む）
  • rel="stylesheet" を書き忘れている
  • ローカルと本番でディレクトリ構成が異なる

見落としやすいのが大文字・小文字です。WindowsやMacのパソコン上では「Style.css」と「style.css」を同じファイルとして扱えることが多いのに対し、多くのWebサーバー（Linux）では別のファイルとして区別されます。そのため「ローカルでは表示されるのに、サーバーにアップすると反映されない」というトラブルが起きます。

対策

  1. ブラウザの開発者ツールで Network タブを開いてページを再読み込みし、CSS ファイルが 200 で取得できているか確認（404なら、パスかファイル名が間違っています）
  2. 相対パスと絶対パスを使い分け、<link rel="stylesheet" href="/css/style.css"> のように先頭スラッシュを付けるとルートから解決できる
  3. 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');

相対パスは「そのHTMLファイルがある場所」が基準になります。たとえば index.html と同じ階層に css フォルダがあるなら href="css/style.css"、HTMLが blog/ フォルダの中にあるなら href="../css/style.css" と、1つ上の階層に戻る指定が必要です。フォルダ構成の考え方は、こちらの記事でも解説しています。

初心者がコードを書く前に知っておくべきファイル構成の基本と実践例

また、ファイル自体は見つかっているのに、開発者ツールの Console に「Refused to apply style from ‘…’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type」と表示される場合は、CSSの代わりにエラーページ（HTML）が返ってきています。URLを直接ブラウザで開き、本当にCSSの中身が表示されるかを確認しましょう。

原因2：セレクタの書き間違い・HTMLとの不一致

原因

CSSファイルが読み込まれていても、セレクタがHTMLの要素と一致していなければスタイルは当たりません。初心者が特につまずきやすいのは次のようなミスです。

  • クラスなのに . を付け忘れている（title { } と書いて class="title" を狙っている）
  • IDに .、クラスに # を付けている
  • HTML側のクラス名とCSS側のスペルが違う（btn-primary と btn_primary など）。クラス名は大文字・小文字も区別されます
  • 子孫セレクタ（.card .title）と複数クラス指定（.card.title）を取り違えている
  • JavaScriptで後から追加される要素や、iframe の中の要素を狙っている

対策

  1. 開発者ツールの Elements パネルで要素を選び、実際に付いているクラス名をコピーしてCSSに貼り付ける
  2. Console で document.querySelectorAll('.card .title') のようにセレクタを実行し、狙った要素が取れるか確かめる（空なら一致していません）
  3. iframe の中身は親ページのCSSでは装飾できないため、iframe 側のページにCSSを書く

原因3：セレクタの優先度（Specificity）負け

原因

同じ要素に複数のスタイルが当たる場合、詳細度（Specificity）が高いルールが勝ちます。!important やインラインスタイルも含めた優先度の強さは、おおまかに次の順番です。

強さ指定方法例
最強!important を付けた宣言color: red !important;
強いHTMLの style 属性（インラインスタイル）<p style="color: red">
やや強いIDセレクタ#main
普通クラス・属性・疑似クラス.box、[type="text"]、:hover
弱い要素名・疑似要素p、::before

詳細度がまったく同じ場合は、あとに書かれた（あとで読み込まれた）ルールが勝ちます。たとえば .box { color: red; } のあとに別のファイルで .box { color: blue; } が読み込まれていれば、青になります。

対策

  • できる限り クラス名 を軸に設計し、ID での装飾を避ける
  • !important 連発はメンテナンス性を損なうため、まずはセレクタ設計を見直す
  • Chrome DevTools の Styles パネルで、取り消し線が付いているプロパティを確認し、どのルールに負けているか特定
  • Computed タブでプロパティ名をクリックすると、最終的に採用された値と、どのファイルの何行目から来ているかが分かる

Chrome DevToolsでは、セレクタにマウスを乗せると詳細度が「(0, 1, 0)」のように表示されます。左からID・クラス・要素の数を表していて、左の数字が大きいほうが強いと覚えておくと、負けている理由をすぐ判断できます。

原因4：ブラウザキャッシュが残っている

原因

CSS を上書きしても、ブラウザが古いファイルをキャッシュから読み込むと変更が反映されません。「自分のパソコンでは古いまま、スマホでは新しい」など、端末によって見え方が違う場合はキャッシュを疑いましょう。

対策

  1. 強制リロード（Windows: Ctrl + F5 または Ctrl + Shift + R / macOS: ⌘ + Shift + R）でキャッシュを無視
  2. 開発中は、開発者ツールの Network タブにある「Disable cache（キャッシュを無効化）」にチェックを入れておく（開発者ツールを開いている間だけ有効）
  3. link タグにクエリ文字列を付与し、バージョン管理：
    <link rel="stylesheet" href="style.css?v=20261021">
  4. WordPress の wp_enqueue_style() 第四引数にファイル更新日時を渡し、自動でキャッシュバスターを付ける（原因1のコード例の filemtime() の部分）

クエリ文字列の数字（例の 20261021）は、CSSを更新するたびに変えます。ブラウザは「URLが変わった＝別のファイル」と判断して、新しいCSSを取りに行きます。

原因5：CSS の構文エラー

原因

  • セミコロン抜けや中括弧の閉じ忘れ
  • コメントアウトの /* と */ が不一致
  • プロパティ名や値のスペルミス
  • 全角スペースや全角の記号（：、；）が混ざっている

CSSは、間違った部分をエラーで止めずに黙って無視する仕組みです。そのため、セミコロンが1つ抜けているだけで次の行のプロパティまで無効になったり、中括弧の閉じ忘れでそれ以降のルールがまとめて効かなくなったりします。全角スペースは見た目では気づきにくいので、日本語入力をオンにしたまま書いた行は特に注意しましょう。

/* NG：セミコロン抜けで、colorとfont-sizeの両方が無効になる */
.title {
  color: red
  font-size: 20px;
}

/* OK */
.title {
  color: red;
  font-size: 20px;
}

対策

  1. VS Code などのエディタで Stylelint などのCSS用の拡張機能を導入し、書いた時点でミスを見つける（VS Codeは標準でもCSSの文法エラーに波線を表示します）
  2. 開発者ツールの Styles パネルで、取り消し線と黄色い警告マークが付いたプロパティ（無効な値）を確認する
  3. 小さな変更をこまめに保存・確認し、エラー発生箇所を早期に特定

なお、JavaScriptと違い、CSSの構文エラーはChromeの Console にはほとんど表示されません。Firefoxなら Console の「CSS」フィルターをオンにすると、無視された宣言を警告として確認できます。エディタの拡張機能選びに迷ったら、こちらの記事も参考にしてください。

VS Codeのおすすめ拡張機能10選｜入れ方と不要になった拡張も解説

原因6：プロパティが効かない条件になっている

原因

CSSは正しく当たっているのに、要素の種類や周りの指定によってそもそも効果が出ないプロパティがあります。代表的な例をまとめました。

効かないプロパティよくある理由対策
width / height / 上下の marginspan や a などのインライン要素には効かないdisplay: inline-block; か block にする
top / left / z-indexposition が初期値（static）のままposition: relative; などを指定する（z-indexはflex・gridの子要素なら効く）
margin: 0 auto; での中央寄せ要素に幅が指定されていない、またはインライン要素width（または max-width）を指定し、ブロック要素にする
vertical-alignブロック要素には効かないFlexboxの align-items: center; を使う
height: 100%;親要素の高さが決まっていない親に高さを指定するか、Flexbox・Gridで高さをそろえる
position: sticky;親や祖先に overflow: hidden; がある、top が未指定top: 0; などを指定し、祖先の overflow を見直す

対策

  • 開発者ツールの Computed タブで、要素の display や position の実際の値を確認する
  • Chrome・Edgeでは、効かない条件のプロパティにマウスを乗せると「なぜ効かないか」と対処法がヒントとして表示されることがあるので活用する

「消したはずの要素が消えない」「見えないのにスペースが残る」といった表示・非表示まわりのトラブルは、こちらで詳しく解説しています。

【完全比較】CSSのdisplay:noneとvisibility:hiddenの違いとは？使い分け・注意点まで徹底解説

原因7：メディアクエリの条件・書き順の間違い

原因

「パソコンでは効くのにスマホでは効かない（または逆）」という場合は、メディアクエリが原因のことが多いです。

  • HTMLの <head> に viewport の指定がなく、スマホがパソコン幅で表示している
  • メディアクエリの中のスタイルを、通常のスタイルより前に書いている（詳細度が同じなので、あとに書いた通常のスタイルに上書きされる）
  • max-width と min-width を取り違えている、中括弧の閉じ忘れでメディアクエリの外まで巻き込んでいる

対策

  1. <head> に <meta name="viewport" content="width=device-width, initial-scale=1"> があるか確認する
  2. メディアクエリは、対象のスタイルよりもあと（ファイルの下のほう）に書く
  3. 開発者ツールのデバイスモード（Chromeなら Ctrl + Shift + M、Macは ⌘ + Shift + M）で画面幅を変えながら、どの幅でルールが適用されるか確認する
/* 通常のスタイルを先に書く */
.box { width: 50%; }

/* メディアクエリはあとに書く（画面幅768px以下で上書き） */
@media (max-width: 768px) {
  .box { width: 100%; }
}

要素の幅に応じてスタイルを変えたい場合は、メディアクエリではなくコンテナクエリを使う方法もあります。

CSSコンテナクエリの使い方｜@containerとメディアクエリの違い

原因8：外部ライブラリやテーマによる競合

原因

Bootstrap や Tailwind などのフレームワークを読み込むと、既定のリセットやユーティリティが自作 CSS を上書きする場合があります。WordPressのテーマやプラグインのCSSも同じで、テーマ側のセレクタのほうが詳細度が高いと、自分で書いたCSSが負けてしまいます。

対策

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

Tailwind CSSのクラスが効かない場合

Tailwind CSSは、ソースファイルの中に書かれたクラス名を探して、使われているものだけCSSを生成します。2025年1月に公開されたv4からは tailwind.config.js の content 設定が不要になり、プロジェクト内のファイルを自動で検出する方式に変わりました（2026年10月時点の最新はv4.3）。v3時代の記事を見て content を設定しようとしても、v4では効果がないので注意しましょう。

  • text-{{ color }}-600 のように、クラス名を文字列の連結で組み立てると検出されない。text-red-600 のように完全な形で書く
  • .gitignore に含まれるフォルダや node_modules 内のファイルは自動検出の対象外。読み込ませたい場合は、CSSファイルに @source "../node_modules/ライブラリ名"; のように追記する

詳しくは、Tailwind CSS公式ドキュメント（Detecting classes in source files）で確認できます。

レバテックキャリアの評判は？ITエンジニア転職のメリット・注意点【2026年】

原因9：カスケードレイヤー（@layer）の順番

原因

最近のCSSでは、@layer を使ってスタイルを「レイヤー（層）」に分けられます。Tailwind CSS v4のように内部で @layer を使うライブラリも増えています。レイヤーには次のようなルールがあり、知らないと「詳細度は高いのに負ける」という不思議な現象が起きます。

  • レイヤー同士では、詳細度よりレイヤーの順番が優先される（あとに宣言されたレイヤーが勝つ）
  • どのレイヤーにも入っていない通常のスタイルは、レイヤー内のスタイルより強い
  • !important を付けると順番が逆転し、先に宣言されたレイヤーの !important のほうが強くなる

対策

  • 開発者ツールの Styles パネルで、ルールの上に表示されるレイヤー名（@layer base など）を確認する
  • ファイルの先頭で @layer reset, base, components, utilities; のように順番をまとめて宣言しておくと、意図した優先順位になる
  • 自作のスタイルを確実に優先したいなら、レイヤーの外（または最後のレイヤー）に書く

原因10：WordPress特有の原因（追加CSS・キャッシュ）

原因

WordPressでは、ブラウザ以外にも「キャッシュ」や「CSSを書く場所」が複数あるため、反映されないトラブルが起きやすくなります。

  • キャッシュ系プラグイン、サーバーのキャッシュ機能、CDNが古いCSSを配信し続けている
  • CSSの圧縮・結合機能（テーマやプラグインの高速化設定）で、古いファイルがまとめられたままになっている
  • 親テーマの style.css を直接編集していて、テーマのアップデートで上書きされた
  • 子テーマ、カスタマイザーの「追加CSS」、ブロックの「追加CSSクラス」など、書く場所を間違えている

対策

  1. キャッシュ系プラグインやサーバーの管理画面で、キャッシュを削除する（CDNを使っている場合はCDN側もパージする）
  2. ログアウトした状態やシークレットウィンドウでも表示を確認する（ログイン中はキャッシュが無効になる設定が多く、見え方が変わるため）
  3. CSSは親テーマを直接編集せず、子テーマの style.css か「追加CSS」に書く。クラシックテーマは「外観」→「カスタマイズ」→「追加CSS」、ブロックテーマはサイトエディターのスタイル画面から追加CSSを開けます

どのテンプレートファイルがどのページに使われているか分からない場合は、テンプレート階層の仕組みを知っておくと、CSSを当てる場所を特定しやすくなります。

WordPressテンプレート階層と主要ファイル解説｜クラシック＆ブロックテーマ対応

CSSが反映されないときのよくある質問

!importantを付ければ解決しますか？

一時的には効くことが多いですが、おすすめしません。!important を付けたスタイルを後から変えるには、さらに !important を重ねる必要があり、CSSがどんどん管理しにくくなります。まずは開発者ツールで「どのルールに負けているか」を確認し、セレクタの詳細度や読み込み順で解決しましょう。どうしてもテーマやプラグインのCSSに勝てない場合の最終手段と考えてください。

ローカルでは反映されるのに、サーバーにアップすると反映されません

よくある原因は、ファイル名の大文字・小文字の違い（原因1）、パスの基準となるフォルダ構成の違い（原因1）、サーバーやCDNのキャッシュ（原因4・10）の3つです。まず Network タブでCSSファイルが200で読み込まれているかを確認し、読み込まれていればキャッシュ、404ならパスやファイル名を疑いましょう。

スマホだけCSSが反映されません

viewportの指定漏れやメディアクエリの書き順（原因7）か、スマホのブラウザに古いキャッシュが残っている（原因4）ことが考えられます。スマホのブラウザでは強制リロードのショートカットが使えないため、閲覧履歴とキャッシュの削除を行うか、クエリ文字列を変えて新しいファイルを読み込ませるのが確実です。

原因の切り分けを手早く試す方法はありますか？

問題の部分だけを抜き出して、最小限のHTMLとCSSで再現させるのが効果的です。再現しなければ周りのCSSとの競合、再現すれば書いたコード自体の問題と判断できます。ブラウザ上ですぐにHTML・CSSを試せるツールも用意しているので、切り分けにご活用ください。

コードプレイグラウンド｜HTML/CSS/JavaScript をその場で試せる無料オンラインツール

まとめ

CSS が反映されないときは、「読み込み → セレクタ → 優先度 → キャッシュ → 構文」の順でチェックすると原因を早く特定できます。それでも直らなければ、プロパティが効く条件、メディアクエリ、ライブラリやテーマとの競合、@layer、WordPressのキャッシュを確認しましょう。
開発者ツールを活用し、少しずつ切り分けることが解決への近道です。
今回紹介した 10 の対策を実践し、ストレスなくフロントエンド開発を進めましょう。

HTMLのformタグとinput属性の使い方まとめ＋バリデーション入門【初心者向け完全ガイド】
IT知識
CSS WordPress
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次