CSSを書いて保存したのに、ブラウザを開いても見た目がまったく変わらない。
HTMLとCSSを学び始めた人が、ほぼ全員つまずくポイントです。
コード合ってるはずやのに、色が変わらへんねん…もうワイのCSS壊れてしもたんかな？
安心してください。CSSが反映されない理由は、ほとんどが決まったパターンのどれかです。
やみくもにコードを書き直すのではなく、可能性の高い原因から順番に潰していけば、たいていは数分で見つかります。
この記事では、切り分けの手順と8つの原因別の対処法を、初心者の方向けに順を追って解説します。
こんな人におすすめ
「書いたCSSが効かず、原因の見当もつかない」
「とりあえず !important を付けて解決している」
「検証ツールの見方がよく分かっていない」
まず最初にやる3つの切り分け
原因を探す前に、問題がどこで起きているかを絞り込みます。
この3つをやるだけで、調べる範囲が一気に狭くなります。
1. 検証ツールでスタイルが当たっているか見る
変わってほしい要素の上で右クリックし、「検証」（Chromeの場合）を選びます。
右側の「Styles」パネルに、自分が書いたセレクタが表示されているかを確認してください。
そもそも表示されていないなら、CSSが届いていないということです。
表示されているのに打ち消し線が引かれているなら、届いてはいるが他のスタイルに負けている状態です。
前者なら原因①〜③、後者なら原因④〜⑥を重点的に見ていきます。
2. シークレットウィンドウで開いてみる
シークレットウィンドウ（プライベートウィンドウ）は、キャッシュや拡張機能の影響を受けにくい状態でページを表示します。
ここで正しく表示されるなら、コードではなくキャッシュ側の問題である可能性が高くなります。
3. わざと極端なCSSを書いて反応を見る
効かないセレクタに、一時的に分かりやすすぎるスタイルを当ててみます。
.card {
background: red;
border: 5px solid blue;
}これで赤くなるなら、セレクタは当たっていてプロパティ側に問題があると分かります。
まったく反応しないなら、セレクタか読み込みの問題です。
原因①：ブラウザにキャッシュが残っている
ブラウザは表示を速くするため、一度読み込んだCSSファイルを保存して使い回します。
そのため、ファイルを更新しても古いCSSが表示され続けることがあります。
スーパーリロードで読み直す
キャッシュを無視して読み込み直す操作を、スーパーリロード（ハードリロード）と呼びます。
| 環境 | ショートカットキー |
|---|---|
| Windows（Chrome・Edge・Firefox） | Ctrl + Shift + R |
| Mac（Chrome・Edge・Firefox） | Command + Shift + R |
| Mac（Safari） | Option + Command + E のあと Command + R |
開発中はキャッシュを無効にしておく
毎回ショートカットを押すのは面倒なので、開発中は検証ツール側で止めてしまうのが確実です。
検証ツールの「Network」タブを開き、「Disable cache」にチェックを入れます。
この設定は検証ツールを開いている間だけ有効なので、閉じると元に戻る点に注意してください。
公開サイトならバージョン番号を付ける
公開済みのサイトでは、訪問者のブラウザにも古いCSSが残っています。
読み込みのURLに数字を付け替えることで、別ファイルとして読み直させることができます。
<link rel="stylesheet" href="css/style.css?ver=2">更新のたびに数字を増やせば、確実に最新のCSSが読み込まれます。
キャッシュそのものの仕組みを詳しく知りたい方は、こちらの記事もあわせてどうぞ。
キャッシュが親切心で古いのを見せてくれてたんか…ややこしいことしよるなあ。
原因②：CSSファイルが読み込めていない
検証ツールのStylesパネルに自分のセレクタが1つも出てこない場合、CSSファイル自体が届いていない可能性が高いです。
Networkタブで404が出ていないか見る
検証ツールの「Network」タブを開いた状態でページを再読み込みします。
CSSファイルの行が赤色や404表示になっていれば、パスが間違っていて読み込めていない状態です。
よくあるパスのミス
フォルダ構成とパスの書き方が合っているか、次の点を確認してください。
- HTMLから見た相対パスになっているか（1つ上の階層なら
../css/style.css） - ファイル名の綴りが合っているか（
styel.cssのような打ち間違い） - 大文字と小文字が一致しているか（
Style.cssとstyle.cssは別物） - 拡張子が二重になっていないか（
style.css.txt）
とくに大文字・小文字の違いは、自分のパソコンでは動くのにサーバーに上げると効かないという形で表面化します。
linkタグの書き方が崩れている
パスが正しくても、タグの書き方が間違っていれば読み込まれません。
<!-- 正しい書き方 -->
<link rel="stylesheet" href="css/style.css">
<!-- rel の綴り間違い（効かない） -->
<link rel="stylesheer" href="css/style.css">rel="stylesheet" の綴りミスや、href のクォートの閉じ忘れは意外と多いミスです。
また、<link> はhead内に書くのが基本です。
原因③：セレクタの書き方が間違っている
CSSは届いているのに特定のスタイルだけ効かない場合、セレクタが目的の要素をつかめていないことが多いです。
クラスとIDの記号を取り違えている
クラスは.（ドット）、IDは#（シャープ）で指定します。
<div class="card"></div>/* 効く */
.card { color: red; }
/* 効かない（IDとして探しにいく） */
#card { color: red; }
/* 効かない（card というタグを探しにいく） */
card { color: red; }記号を付け忘れると、存在しないタグ名を探している状態になり、エラーも出ないまま無視されます。
全角スペースや全角記号が混ざっている
日本語入力のまま書いてしまい、全角の記号やスペースが紛れ込むケースです。
見た目ではほとんど判別できないため、怪しい行はいったん消して半角で打ち直すのが早いです。
親子関係を勘違いしている
セレクタの間の記号によって、対象になる範囲が変わります。
| 書き方 | 対象になる要素 |
|---|---|
.list li | .listの中にあるすべてのli（孫以下も含む） |
.list > li | .listの直下にあるliのみ |
.list.active | listとactiveを両方持つ要素 |
.list .active | .listの中にあるactive（スペースの有無で別物） |
スペースがあるかないかで意味が変わる点は、初心者がとくに間違えやすいところです。
スペース1個で別物になるとか、そんなん気づけるわけないやん…！
迷ったときは検証ツールでHTMLの構造を開き、実際の入れ子を目で確認するのが確実です。
原因④：詳細度で負けている
同じ要素に複数のスタイルが指定されたとき、どれを採用するかは詳細度という優先順位で決まります。
検証ツールで自分のスタイルに打ち消し線が引かれていたら、この詳細度で負けているサインです。
詳細度の強さの順番
詳細度は、大きく次の順で強くなります。
| 強さ | 指定方法 | 例 |
|---|---|---|
| 弱い | タグ名・疑似要素 | p / ::before |
| 中 | クラス・属性・疑似クラス | .card / :hover |
| 強い | ID | #header |
| さらに強い | HTMLに直接書いたstyle属性 | style="color:red" |
| 最強 | !important | color: red !important; |
たとえば #header p と .title なら、IDを含むほうが勝ちます。
クラスをいくつ重ねてもIDには勝てない、と覚えておくと分かりやすいです。
勝たせたいときの考え方
負けているスタイルを効かせるには、セレクタを少しだけ具体的にします。
/* 負けている */
.title { color: blue; }
/* 親要素を足して詳細度を上げる */
.header .title { color: blue; }ここで安易に!importantを足すと、あとから調整するときに手が付けられなくなります。
まずはセレクタで解決できないかを考えるのが、あとで自分を助ける進め方です。
原因⑤：あとに書いたCSSに上書きされている
詳細度がまったく同じ場合は、あとに書かれたほうが勝ちます。
.card { color: red; }
/* 下にあるこちらが適用される */
.card { color: blue; }ファイルが長くなると、同じセレクタを別の場所にもう一度書いてしまうことがよくあります。
エディタの検索機能でクラス名を検索し、同じセレクタが複数ないかを確認してみてください。
CSSファイルの読み込み順にも注意
これはファイル単位でも同じことが起こります。
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">この順番だと、あとから読み込まれたリセットCSSが自分のスタイルを打ち消してしまいます。
リセットCSSやフレームワークは先に、自分のCSSは最後に読み込むのが基本です。
原因⑥：!important が効いてしまっている
!importantが付いた指定は、詳細度に関係なく優先されます。
自分では書いていなくても、テーマやプラグイン、フレームワークのCSSに含まれていることがあります。
検証ツールで打ち消し線の付いていないほうの指定を見て、!importantが付いていないか確認してください。
その場合は、該当のCSSを直接直せるならそちらを修正するのが本筋です。
触れない外部のCSSが相手なら、こちらも!importantを使うのはやむを得ない選択になります。
ただし乱用すると打ち消し合いになるため、使った箇所にはコメントで理由を残しておくと後で困りません。
HTMLに直接書いたstyle属性も要注意
HTMLのタグに直接書かれたstyle属性は、CSSファイルの指定より強く働きます。
<div class="card" style="color: red;">テキスト</div>JavaScriptがstyle属性を書き込んでいる場合もあるので、検証ツールでHTMLの実際の状態を確認しましょう。
原因⑦：CSSの書式が壊れている
CSSはエラーが出ても画面に何も表示されないため、書式の崩れに気づきにくい言語です。
そして書式が崩れると、そこから下の指定がまとめて無視されることがあります。
波かっこの閉じ忘れ
.card {
color: red;
/* ここで } を閉じ忘れている */
.title {
color: blue;
}この場合、.titleの指定まで巻き込まれて効かなくなります。
「途中から下が全部効かない」ときは、まず閉じ忘れを疑ってください。
セミコロンの付け忘れ
.card {
color: red /* セミコロンがない */
font-size: 16px;
}行がつながってしまい、colorとfont-sizeの両方が無効になります。
コメントの閉じ忘れ
CSSのコメントは/*で始まり*/で終わります。
終わりを書き忘れると、それ以降のCSSがすべてコメント扱いになって消えてしまいます。
多くのエディタではコメント部分の色が変わるため、色がおかしい範囲を探すと一瞬で見つかります。
原因⑧：そのプロパティ自体が効かない条件だった
セレクタも書式も正しいのに効かない場合、プロパティが働く条件を満たしていないことがあります。
初心者がつまずきやすい代表的なパターンを挙げます。
| 効かない指定 | 理由と対処 |
|---|---|
インライン要素にwidthやheight | spanやaは横幅を持たない。display: blockやinline-blockを指定する |
インライン要素に上下のmargin | 上下方向は反映されない。同じくdisplayを変更する |
z-indexが効かない | positionがstatic（初期値）のままだと無効。relativeなどを指定する |
::beforeや::afterが出ない | contentプロパティが必須。空でもcontent: "";と書く |
子要素にtext-align: centerが効かない | センタリングしたい要素ではなく、その親に指定する |
gapが効かない | 親要素がdisplay: flexやgridになっているか確認する |
検証ツールのStylesパネルでは、効かないプロパティに警告マークが表示されることもあります。
コードは間違ってへんかったんや…！条件のほうを知らんかっただけやってんな。
それでも直らないときに見るところ
メディアクエリの範囲外になっている
スタイルをメディアクエリの中に書いている場合、画面幅が条件に合っていなければ当然反映されません。
@media (max-width: 768px) {
.card { color: red; }
}この指定はブラウザ幅を768px以下にしないと効きません。
また、スマホでの見え方がおかしい場合はviewportの指定漏れも疑ってください。
WordPressやサーバー側のキャッシュ
WordPressサイトの場合、ブラウザだけでなくキャッシュ系プラグインやサーバー側のキャッシュが古いCSSを配信していることがあります。
管理画面やレンタルサーバーの管理ツールから、キャッシュを削除して再確認してみてください。
ビルドが走っていない
SassやTailwind CSSなど、変換が必要な仕組みを使っている場合は少し事情が違います。
元ファイルを編集しても、ビルドが実行されなければ出力側のCSSは古いままです。
監視コマンドが動いているか、出力先のCSSファイルが実際に更新されているかを確認しましょう。
まとめ
CSSが反映されないときは、検証ツールでスタイルが表示されているかどうかから入るのが最短ルートです。
表示されていなければ、キャッシュ・読み込みパス・セレクタの3つを疑います。
表示されていて打ち消し線が引かれているなら、詳細度・記述順・!importantの争いに負けている状態です。
どちらでもなければ、書式の崩れかプロパティが働く条件を確認してみてください。
この順番を身につけてしまえば、次に同じ状況になっても手が止まらずに原因までたどり着けます。
とりあえず全部に!important付けるんは、もうやめとくわ…！
よくある質問
- CSSが反映されないとき、最初に何をすればいいですか？
-
検証ツールを開き、対象の要素に自分のCSSが表示されているかを確認してください。表示されていなければ読み込みやセレクタの問題、打ち消し線が引かれていれば優先順位の問題だと切り分けられます。
- スーパーリロードのショートカットキーを教えてください。
-
WindowsのChromeなら Ctrl + Shift + R、Macなら Command + Shift + R です。開発中は検証ツールのNetworkタブにある「Disable cache」にチェックを入れておくと、毎回押す必要がなくなります。
- 検証ツールで打ち消し線が引かれているのはなぜですか？
-
そのスタイルが、別のより優先度の高い指定に上書きされているという意味です。詳細度が高いセレクタ、あとに書かれた同じ指定、!important、style属性のいずれかに負けています。
- !important は使わないほうがいいですか？
-
まずはセレクタの詳細度や記述順で解決できないかを考えるのがおすすめです。自分で編集できない外部のCSSを上書きしたい場合など、必要な場面はありますが、多用すると打ち消し合いになって修正が難しくなります。
- 自分のパソコンでは効くのに、サーバーに上げると効きません。
-
ファイル名やフォルダ名の大文字・小文字の違いを確認してください。サーバーの環境によっては大文字と小文字が区別されるため、パスが一致せず読み込めていないことがあります。アップロード漏れやキャッシュも合わせて確認しましょう。
- スマホで見たときだけCSSが反映されません。
-
メディアクエリの条件と、HTMLのviewport指定を確認してください。指定した画面幅の範囲に入っていない場合や、head内にviewportのmetaタグがない場合、スマホでの表示だけが崩れることがあります。