ChromeでCSSが反映されない、VSCodeで編集しても変わらない、GitHub Pagesにデプロイすると崩れる——CSSが効かない原因は、使っている環境ごとに異なります。この記事では、ブラウザ（Chrome）・エディタ（VSCode）・デプロイ先（GitHub Pages）の3つの環境別に、CSSが反映されない原因と対処法を切り分けて解説します。セレクタや詳細度など原因の全体像はCSSが反映されない原因と対処法をあわせてご覧ください。
ChromeでCSSが反映されない場合の対処法
ChromeでCSSが反映されない場合とは、Chrome独自のキャッシュ機構や拡張機能が原因で、CSSの変更がブラウザに正しく表示されない状態のことです。以下の手順で原因を切り分けましょう。
強制リロードとキャッシュクリア
Chromeでは通常の再読み込み（F5）ではキャッシュされたCSSが使われ続けることがあります。以下の方法で強制的に最新のCSSを読み込みましょう。
- スーパーリロード: Ctrl + Shift + R（Mac: Cmd + Shift + R）で強制再読み込み
- キャッシュの完全削除: 設定 → プライバシーとセキュリティ → 閲覧履歴データの削除 → 「キャッシュされた画像とファイル」にチェック → データを削除
- DevToolsでキャッシュ無効化: F12でDevToolsを開き、「Network」タブの「Disable cache」にチェックを入れる（DevTools開放中のみ有効）
DevToolsでCSSの適用状態を確認する
ChromeのDevTools（F12）は、CSSの問題を特定する最も効率的なツールです。対象要素を右クリック → 「検証」で、以下を確認できます。
- Elementsタブ → Styles: 適用されているCSSルールと、打ち消し線で上書きされたプロパティが一覧表示される
- Elementsタブ → Computed: 最終的に計算された値を確認できる。どのルールが勝っているかが明確にわかる
- Networkタブ: CSSファイルが正常に読み込まれているか（200 OK）、404エラーになっていないかを確認
Chrome拡張機能による干渉
広告ブロッカーやダークモード系の拡張機能がCSSを上書きしているケースがあります。シークレットウィンドウ（Ctrl + Shift + N）で同じページを開き、拡張機能なしの状態で表示が正常かどうかを確認しましょう。正常に表示される場合は、拡張機能を1つずつ無効化して原因を特定します。
VSCodeでCSSが反映されない・効かない場合の確認ポイント
VSCodeでCSSが反映されない場合とは、エディタ上でCSSを編集しているにもかかわらず、Live ServerやプレビューでスタイルがHTML側に適用されない状態のことです。VSCode特有の原因を確認しましょう。
ファイルの保存忘れ
VSCodeでは未保存のファイルはタブに白い丸印（●）が表示されます。CSSを編集した後、Ctrl + S（Mac: Cmd + S）で保存してからブラウザをリロードしましょう。自動保存を有効にするには、「設定 → Auto Save → afterDelay」に変更するのが推奨です。
Live Serverの設定確認
VSCodeの拡張機能「Live Server」を使っている場合、以下のポイントを確認してください。
- HTMLファイルを直接開いていないか: ファイルをダブルクリックで開くと
file:///プロトコルになり、Live Serverが動作しません。必ずLive Serverの「Go Live」ボタンから起動する - ワークスペースのルートフォルダ: CSSファイルのパスはワークスペースのルートを基準に解決されるため、フォルダの開き方が間違っていると読み込みに失敗する
- ポートの競合: 既に別のプロセスが同じポート（デフォルト5500）を使用していると正常に動作しない場合がある
CSSファイルのパスとディレクトリ構成
VSCodeのエクスプローラーでディレクトリ構成を確認し、HTMLの<link>タグのパスと実際のCSSファイルの場所が一致しているか確かめましょう。よくあるミスは以下の通りです。
<!-- よくあるパスミスの例 -->
<!-- NG: 大文字小文字が違う -->
<link rel="stylesheet" href="CSS/style.css">
<!-- OK: 実際のフォルダ名と一致 -->
<link rel="stylesheet" href="css/style.css">Windowsのローカル環境では大文字小文字を区別しないため問題が起きませんが、Linux系のサーバーにデプロイすると404エラーになるケースがあります。開発段階から小文字で統一する習慣をつけましょう。
Emmetの展開結果を確認する
VSCodeのEmmet機能でCSSを素早く入力できますが、展開結果が意図と異なる場合があります。例えばbgcと入力してTabキーを押すとbackground-color: #fff;が展開されますが、値を書き換え忘れるケースがあります。Emmet展開後は必ず値を確認しましょう。
GitHubでCSSが反映されない原因
GitHubでCSSが反映されない場合とは、GitHub Pagesやリポジトリ上でホスティングしているサイトにCSSの変更がデプロイされない、または表示に反映されない状態のことです。GitHub特有の原因を確認しましょう。
GitHub Pagesのキャッシュ
GitHub PagesはCDN経由で配信されるため、CSSの変更が反映されるまで数分〜最大10分程度かかることがあります。pushした直後に変化がない場合は、しばらく待ってからスーパーリロードを試しましょう。それでも反映されない場合は、リポジトリの「Actions」タブでデプロイが完了しているか確認してください。
CSSファイルのパス設定
GitHub Pagesでは、リポジトリ名がサブディレクトリとしてURLに含まれるため、ローカルでは正常に動作していたCSSパスがGitHub Pages上で404になるケースがあります。
<!-- NG: ローカルでは動くがGitHub Pagesで404 -->
<link rel="stylesheet" href="/css/style.css">
<!-- OK: リポジトリ名を含めたパス -->
<link rel="stylesheet" href="/my-repo/css/style.css">
<!-- OK: 相対パスを使う（推奨） -->
<link rel="stylesheet" href="./css/style.css">ルート相対パス（/css/style.css）はGitHub Pagesのサブディレクトリ構成と合わないため、相対パス（./css/style.css）を使用するのが推奨です。
gitにCSSファイルがコミットされているか確認
ローカルでCSSを編集してもgit addとcommitをしなければ、GitHub上のファイルは更新されません。また、.gitignoreにCSSファイルやcssディレクトリが含まれていないか確認しましょう。SCSSやSassを使っている場合、コンパイル後のCSSファイルが.gitignoreで除外されていると、pushしてもCSSがGitHubにアップロードされません。
# CSSファイルがgit管理下にあるか確認
git ls-files css/style.css
# .gitignoreの内容を確認
cat .gitignore | grep cssブランチの設定ミス
GitHub Pagesの公開ブランチとpush先のブランチが異なる場合、変更が反映されません。リポジトリの「Settings → Pages」で、公開ソースのブランチが正しいか（main / gh-pages など）を確認しましょう。開発ブランチにpushしただけでは公開サイトは更新されません。
まとめ
CSSが反映されないとき、原因がブラウザ・エディタ・デプロイ環境のどこにあるかで対処は変わります。Chromeならキャッシュと拡張機能、VSCodeなら保存忘れとLive Server、GitHub Pagesならパス指定とブランチ設定——環境ごとの切り分けポイントを押さえれば、原因の特定は一気に早くなります。セレクタや詳細度など一般的な原因はCSSが反映されない原因と対処法をご覧ください。
よくある質問（FAQ）
Q. CSSが反映されない主な原因は？
A. キャッシュの残存、セレクタの詳細度不足、プロパティ名のスペルミス、ファイルパスの間違い、CSSファイルの読み込み順序の問題が主な原因です。まずブラウザのデベロッパーツールで対象要素のスタイルを確認してください。
Q. ChromeでCSSが反映されないとき、まず何をすべきですか？
A. DevToolsを開いて「Network」タブの「Disable cache」にチェックを入れた状態でリロードしてください。これでキャッシュを無視した状態で最新のCSSが読み込まれます。それでも解決しない場合は、シークレットウィンドウで拡張機能の干渉がないか確認しましょう。
Q. VSCodeでCSSを編集してもブラウザに反映されません。原因は？
A. 最も多い原因はファイルの保存忘れです。VSCodeのタブに白い丸印が表示されていないか確認し、Ctrl + S（Mac: Cmd + S）で保存してください。また、Live Serverを使用している場合は「Go Live」ボタンから起動しているか、HTMLファイルを直接ダブルクリックで開いていないかを確認しましょう。
Q. GitHub PagesにデプロイしたサイトでCSSが読み込まれません。
A. GitHub Pagesではリポジトリ名がURLのサブディレクトリに含まれるため、ルート相対パス（/css/style.css）だと404になります。相対パス（./css/style.css）に変更し、CSSファイルがgitにコミットされているか、.gitignoreで除外されていないかも確認してください。
Q. CSSのキャッシュをクリアする方法は？
A. Ctrl+Shift+R（Mac: Cmd+Shift+R）でスーパーリロードを行うか、デベロッパーツールを開いた状態でリロードボタンを長押しして「キャッシュの消去とハード再読み込み」を選択します。ファイル名にバージョンパラメータ（?v=2）を追加する方法もあります。