VSCodeでCSSが反映されない主な原因

2026年9月30日2026年10月1日

VSCodeでHTMLやCSSを編集していると、「CSSを書いたのにデザインが変わらない」「ブラウザを更新してもスタイルが反映されない」といったトラブルが発生することがあります。

このような場合、VSCodeそのものに問題があるとは限りません。
多くの場合は、HTMLからCSSファイルを正しく読み込めていなかったり、CSSのセレクタが間違っていたり、別のスタイルによって上書きされていたりすることが原因です。

また、ブラウザのキャッシュや、メディアクエリなどの適用条件によって、CSSが反映されていないように見えるケースもあります。

CSSが反映されないときは、原因を一つずつ切り分けて確認することが重要です。

CSSファイルが正しく読み込まれているか確認する

linkタグの記述を確認する

外部CSSファイルをHTMLに適用する場合は、通常<head>内に<link>タグを記述します。

<head>
  <link rel="stylesheet" href="style.css">
</head>

rel="stylesheet"は、読み込むファイルがスタイルシートであることをブラウザに伝えるための指定です。

hrefには、CSSファイルの場所を指定します。

たとえば、実際のCSSファイル名がstyle.cssなのに、HTML側で次のように記述していると正しく読み込めません。

<link rel="stylesheet" href="styles.css">

style.cssとstyles.cssは別のファイル名として扱われます。

CSSがまったく反映されない場合は、まず<link>タグの記述を確認しましょう。

CSSファイルのパスを確認する

CSSが反映されない原因として特に多いのが、ファイルパスの指定ミスです。

HTMLとCSSが同じフォルダにある場合は、次のような構成になります。

project/
├── index.html
└── style.css

この場合は、次のように記述できます。

<link rel="stylesheet" href="style.css">

CSSファイルをcssフォルダに保存している場合は、次のようになります。

project/
├── index.html
└── css/
    └── style.css

HTMLでは次のように指定します。

<link rel="stylesheet" href="css/style.css">

さらに、HTMLファイルが別のフォルダにある場合は、../を使って上の階層へ移動する必要があります。

project/
├── css/
│   └── style.css
└── pages/
    └── about.html

この場合は、次のように指定します。

<link rel="stylesheet" href="../css/style.css">

VSCodeのエクスプローラーでフォルダ構成を確認しながら、HTMLからCSSまでの位置関係を確認すると分かりやすいでしょう。

CSSファイルを保存しているか確認する

保存忘れがないか確認する

VSCodeでCSSを書き換えても、ファイルを保存していなければ変更内容がブラウザ側に反映されないことがあります。

Windowsでは次のショートカットで保存できます。

Ctrl + S

macOSでは次のショートカットです。

Command + S

CSSを変更したあとに表示が変わらない場合は、まずファイルが保存されているか確認しましょう。

Auto Saveを利用する

保存忘れが多い場合は、VSCodeのAuto Saveを利用すると便利です。

VSCodeのメニューから、Auto Saveを有効にできます。

自動保存を設定しておけば、CSSを書き換えたあとに保存し忘れるトラブルを減らせます。

編集しているCSSファイルが正しいか確認する

複数のCSSファイルがある場合は注意する

Webサイトによっては、次のように複数のCSSファイルを使用することがあります。

style.css
main.css
common.css
layout.css
responsive.css

たとえばHTMLで読み込んでいるファイルが次のようになっているとします。

<link rel="stylesheet" href="css/style.css">

この状態でmain.cssを編集しても、HTML側で読み込んでいなければ変更は反映されません。

特に既存サイトやWordPressテーマなどでは、多数のCSSファイルが存在する場合があります。

どのCSSファイルが実際に読み込まれているかを確認することが重要です。

CSSのセレクタがHTMLと一致しているか確認する

class名の間違いを確認する

HTML側で次のように記述しているとします。

<p class="message">Hello</p>

この要素にCSSを適用する場合は、次のように指定します。

.message {
  color: red;
}

一方で、次のように記述すると適用されません。

.messages {
  color: red;
}

messageとmessagesは別のclass名だからです。

スペルミスや複数形の違いなども確認しましょう。

classにはドットを付ける

classをCSSで指定するときは、先頭に.を付けます。

.message {
  color: red;
}

次のように書くと、messageという名前のHTML要素を指定する意味になってしまいます。

message {
  color: red;
}

idには#を付ける

HTMLが次のようになっている場合は、CSSでは#を使用します。

<div id="main">
  コンテンツ
</div>

#main {
  background-color: gray;
}

基本的には次のように覚えておくと分かりやすいです。

class → .
id → #
HTML要素 → 記号なし

CSSの構文エラーを確認する

プロパティと値の書き方を確認する

CSSは基本的に、次の形式で記述します。

h1 {
  color: red;
}

CSSでは、プロパティと値を:で区切ります。

そのため、次のような書き方は正しくありません。

h1 {
  color = red;
}

CSSでは、基本的に次の形式を使用します。

プロパティ: 値;

波括弧の閉じ忘れを確認する

CSSでは、{}の閉じ忘れによって、それ以降の記述が正しく解釈されなくなることがあります。

たとえば次のような記述です。

.header {
  color: red;

.main {
  color: blue;
}

.headerの}が不足しています。

正しくは次のようになります。

.header {
  color: red;
}

.main {
  color: blue;
}

CSSが途中から反映されなくなった場合は、直前のコードに構文エラーがないか確認するとよいでしょう。

CSSがコメントアウトされていないか確認する

コメント内のCSSは適用されない

CSSでは、次の形式でコメントを記述できます。

/* コメント */

たとえば次のコードは、すべてコメントとして扱われます。

/*
h1 {
  color: red;
}
*/

そのため、h1の色は変更されません。

編集途中でコメントアウトしたままになっていないか確認しましょう。

別のCSSに上書きされていないか確認する

後に書かれたCSSが適用される場合がある

次のCSSを考えてみましょう。

p {
  color: red;
}

p {
  color: blue;
}

この場合、同じ条件で競合しているため、後に記述されたcolor: blue;が適用されます。

ただし、「CSSは後に書けば必ず優先される」というわけではありません。

CSSでは、カスケードによって最終的に適用される宣言が決まります。

詳細度や!important、インラインスタイルなど、ほかの条件も関係します。

そのため、CSSが上書きできない場合は記述順だけでなく、優先順位全体を確認する必要があります。

CSSの詳細度を確認する

idセレクタとclassセレクタでは優先度が異なる

次のHTMLを例に考えます。

<p id="message" class="text">Hello</p>

CSSを次のように記述します。

#message {
  color: red;
}

.text {
  color: blue;
}

同じカスケード条件にある通常の宣言同士であれば、IDセレクタのほうがclassセレクタより詳細度が高いため、通常は赤色が適用されます。

そのため、.text側を書き換えているのに表示が変わらないということがあります。

CSSが反映されない場合は、別のセレクタの詳細度が高くなっていないか確認しましょう。

!importantが使用されていないか確認する

!importantは通常の宣言より強く扱われる

次のようなCSSがあるとします。

.title {
  color: red !important;
}

その後に次のCSSを書いても、通常の宣言であれば赤色が維持されます。

.title {
  color: blue;
}

!importantは単純に詳細度を高くするものではなく、カスケードにおいて重要宣言として扱われる仕組みです。

CSSが上書きできない場合は、既存のCSSに!importantが使われていないか確認しましょう。

ただし、問題が起きるたびに!importantを追加する方法はおすすめできません。

まずはセレクタやCSSの構造を確認することが重要です。

インラインスタイルが指定されていないか確認する

HTMLのstyle属性を確認する

HTMLに直接スタイルが書かれている場合もあります。

<p class="message" style="color: red;">
  Hello
</p>

この状態で次のCSSを書いても、通常はインラインスタイルが優先されます。

.message {
  color: blue;
}

CSSファイルを書き換えても反映されない場合は、HTML内にstyle属性が指定されていないか確認しましょう。

メディアクエリの条件を確認する

画面幅によって適用されないことがある

レスポンシブデザインでは、メディアクエリを使って画面幅ごとにCSSを切り替えることがあります。

たとえば次のCSSです。

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

このCSSは、基本的に画面幅が768px以下のときに適用されます。

PCの広い画面で確認している場合は、条件に当てはまらないためCSSは適用されません。

また、次のようなCSSもあります。

@media (min-width: 1200px) {
  .title {
    font-size: 40px;
  }
}

この場合、画面幅が1200px未満では指定が適用されません。

CSS自体は読み込まれているのに一部だけ反映されない場合は、メディアクエリの条件も確認しましょう。

疑似クラスの条件を確認する

特定の状態でしか適用されないCSSがある

CSSには、要素の状態に応じてスタイルを適用する疑似クラスがあります。

たとえば次のCSSです。

a:hover {
  color: red;
}

このCSSは、マウスポインターをリンクに合わせている間だけ適用されます。

ほかにも、次のような疑似クラスがあります。

input:focus
button:disabled
a:visited

CSSが反映されないのではなく、疑似クラスの条件が成立していないケースもあるため注意が必要です。

ブラウザのキャッシュを確認する

ブラウザに古いCSSが残っていることがある

CSSを書き換えても以前のデザインが表示され続ける場合は、ブラウザのキャッシュが関係している可能性があります。

まずは通常の再読み込みを行います。

Windowsでは次の操作が一般的です。

Ctrl + R

macOSでは次の操作です。

Command + R

それでも反映されない場合は、強制再読み込みを試します。

ChromeやEdgeをWindowsで使用している場合は、次のショートカットが利用できます。

Ctrl + Shift + R

または、

Ctrl + F5

macOSのChromeなどでは、次の操作が利用できます。

Command + Shift + R

ショートカットはOSやブラウザによって異なる場合があるため、使用している環境に合わせて確認しましょう。

参考サイト

CSSが反映されずお困りのあなたへ #キャッシュ – Qiita

ブラウザの開発者ツールで原因を確認する

Stylesパネルを確認する

CSSが反映されない原因を調べるときは、ブラウザの開発者ツールが非常に役立ちます。

ChromeやEdgeでは、Windowsで一般的に次の操作で開発者ツールを開けます。

F12

または、

Ctrl + Shift + I

Elementsパネルから対象のHTML要素を選択し、Stylesパネルを確認します。

CSSのプロパティに取り消し線が付いている場合は、別のスタイルに上書きされている可能性があります。

これによって、

「CSSファイル自体が読み込まれていない」

のか、

「CSSは読み込まれているが別の指定に負けている」

のかを切り分けられます。

NetworkパネルでCSSを確認する

Networkパネルでは、ブラウザが読み込んだファイルを確認できます。

ページを再読み込みして、CSSファイルが正常に取得できているか確認しましょう。

たとえばCSSファイルが次のようになっていれば、ファイルパスなどに問題がある可能性があります。

404 Not Found

一方、CSSファイルが正常に読み込まれているのであれば、セレクタや詳細度など、CSS内部の問題を疑うことができます。

ファイル名や拡張子を確認する

拡張子が正しいか確認する

CSSファイルのつもりでも、実際には次のようになっている場合があります。

style.css.txt

Windowsではファイル拡張子を非表示にしていることもあるため、気づきにくい場合があります。

VSCodeのエクスプローラーなどで正確なファイル名を確認しましょう。

大文字と小文字にも注意する

次のファイル名は、環境によっては別のファイルとして扱われます。

style.css
Style.css
style.CSS

Windowsのローカル環境では問題が表面化しなくても、Linux系のWebサーバーにアップロードしたときに読み込めなくなることがあります。

Web制作では、ファイル名を小文字で統一しておくと管理しやすいでしょう。

表示しているHTMLファイルが正しいか確認する

別のindex.htmlを開いている場合がある

プロジェクト内に複数のHTMLファイルがある場合、編集しているHTMLとブラウザで表示しているHTMLが異なることがあります。

たとえば次のような構成です。

project/
├── index.html
├── css/
│   └── style.css
└── test/
    └── index.html

この場合、どちらのindex.htmlをブラウザで開いているのか確認する必要があります。

CSSが正しくても、別のページを表示していれば変更は確認できません。

Live Serverなどを利用している場合の確認方法

ローカルサーバーを再起動する

VSCodeでは、Live Serverなどの拡張機能やローカルサーバー環境を利用してHTMLを表示することがあります。

CSSを書き換えたのに表示が変わらない場合は、次の順番で確認するとよいでしょう。

HTMLとCSSを保存する
ブラウザを再読み込みする
表示しているURLやHTMLファイルを確認する
必要に応じてローカルサーバーを再起動する
ブラウザのキャッシュを無視して再読み込みする

VSCodeにはHTMLやCSSの編集支援機能がありますが、CSSの適用結果そのものは、最終的にブラウザ側で確認します。

そのため、VSCodeだけでなくブラウザ側の状態も確認することが重要です。

ReactやNext.jsなどを使っている場合は別の原因もある

フレームワーク固有のCSS読み込み方法を確認する

通常のHTMLとCSSではなく、React、Next.js、Vueなどを使用している場合は、CSSが反映されない原因が増えます。

たとえばCSS Modulesでは、次のように読み込むことがあります。

import styles from "./Button.module.css";

そしてJSX側では次のように記述します。

<button className={styles.button}>

Reactでは通常のHTMLとは異なり、classではなくclassNameを使用します。

また、開発環境によっては次のような点も確認する必要があります。

CSSファイルをimportしているか
CSS Modulesのクラス名が正しいか
scoped CSSの適用範囲
CSS-in-JSの指定
Tailwind CSSなどの設定
ビルドエラー
開発サーバーの状態

そのため、「VSCodeでCSSが反映されない」といっても、使用している開発環境によって原因が異なります。

CSSが読み込まれているか簡単に確認する方法

分かりやすいスタイルを一時的に指定する

CSSファイルが読み込まれているか分からない場合は、見た目が大きく変化するCSSを一時的に追加すると確認しやすくなります。

たとえば次のようにします。

body {
  background-color: red;
}

ページ全体の背景が赤くなれば、そのCSSファイル自体は読み込まれている可能性が高いと判断できます。

この場合は、ファイルの読み込みよりも次の項目を確認します。

セレクタ
詳細度
!important
インラインスタイル
メディアクエリ
疑似クラス

一方、背景色さえ変わらない場合は、次の項目を優先して確認します。

<link>タグ
href
ファイルパス
ファイル名
保存状態
表示しているHTMLファイル

この方法を使うと、原因を効率的に切り分けられます。

VSCodeでCSSが反映されないときの確認手順

まずCSSファイルの読み込みを確認する

CSSが反映されない場合は、次の順番で確認すると効率的です。

CSSファイルを保存する
<link rel="stylesheet">を確認する
hrefのファイルパスを確認する
ファイル名や拡張子を確認する
NetworkパネルでCSSファイルが正常に読み込まれているか確認する

CSSファイル自体が読み込まれていなければ、その後のセレクタや詳細度を調べても解決しません。

次にCSSの内容を確認する

CSSファイルが正常に読み込まれている場合は、次の項目を確認します。

class名やid名が一致しているか
CSSに構文エラーがないか
コメントアウトされていないか
詳細度によって上書きされていないか
!importantが使われていないか
インラインスタイルがないか
メディアクエリの条件に当てはまっているか
疑似クラスの条件が成立しているか

ブラウザの開発者ツールを使えば、これらの問題を確認しやすくなります。

まとめ

VSCodeでCSSが反映されない場合は、VSCode本体よりも、HTML・CSSの記述やブラウザ側の読み込み状態に原因があるケースが多くあります。

特に最初に確認したいのは、CSSファイルがHTMLから正しく読み込まれているかどうかです。

<link rel="stylesheet" href="style.css">

hrefのパスやファイル名が間違っていると、CSSは読み込まれません。

CSSファイルが正常に読み込まれている場合は、classやidの指定、CSSの構文、詳細度、!important、インラインスタイル、メディアクエリなどを確認します。

また、ブラウザの開発者ツールを使えば、CSSが読み込まれているか、どのスタイルが実際に適用されているかを確認できます。

CSSが反映されないときは、闇雲にコードを書き換えるのではなく、「CSSファイルが読み込まれているか」「CSS自体は適用対象になっているか」「別のスタイルに上書きされていないか」という順番で切り分けていくと、原因を効率的に見つけやすくなります。

以上、VSCodeでCSSが反映されない主な原因についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！