CSSやJSの更新が反映されない原因は？ブラウザキャッシュの削除方法と対策を解説【2026年リライト】

CSSを更新したのに反映されない原因

Webサイトを更新したのにデザインが変わらない場合、多くはブラウザキャッシュが原因です。

ブラウザは表示速度を向上させるため、一度読み込んだCSSやJavaScriptをローカルに保存しています。

そのためサーバー上のファイルが更新されていても、古いキャッシュを読み込んでしまうことがあります。

まずはスーパーリロード（Ctrl+F5 または Shift+更新ボタン）を試してみましょう。

JavaScriptを更新したのに動作が変わらない場合

JavaScriptファイルもCSSと同様にキャッシュされます。

特に以下のようなケースではキャッシュが原因である可能性があります。

• フォームの挙動を変更した
• ボタンのクリック処理を修正した
• バリデーションを更新した
• アニメーションを追加した

JavaScriptファイルのURLにバージョン番号を付与することで解決できます。

<script src="script.js?v=20260616"></script>

ブラウザごとにキャッシュ削除方法が異なります。

Google Chrome

1. 設定を開く
2. 閲覧履歴データを削除
3. キャッシュされた画像とファイルを選択
4. データを削除

Microsoft Edge

1. 設定
2. プライバシー、検索、サービス
3. 閲覧データをクリア

Safari

1. Safari設定
2. 詳細
3. 開発メニューを表示
4. キャッシュを空にする

スーパーリロード（強制再読み込み）

• Windows：Ctrl + F5

• macOS：Cmd + Shift + R

ブラウザのキャッシュを無視して、サーバーからファイルを再取得します。開発中の表示確認にも最適。

ブラウザのキャッシュを手動削除

ブラウザの「設定」→「履歴」→「閲覧データの削除」から、キャッシュを選択して削除。

シークレットモード（プライベートウィンドウ）を使う

キャッシュを無効にした状態でアクセス可能。ログイン状態は維持されない点に注意。

1. ファイルにクエリ文字列を付与する（キャッシュバスティング）

<link rel="stylesheet" href="style.css?v=<?php echo time(); ?>">
<script src="main.js?v=<?php echo time(); ?>"></script>

• time() により常に異なるURLとなり、ブラウザは毎回最新ファイルを取得します。

• 本番運用では毎回更新されるとパフォーマンスに影響があるため、filemtime() を使ってファイル更新時のみ変更するのが理想：

<link rel="stylesheet" href="style.css?v=<?= filemtime('style.css'); ?>">

2. HTTPヘッダーでキャッシュ制御（ApacheやPHP）

.htaccess の場合：

<FilesMatch "\.(html|css|js)$">
  Header set Cache-Control "no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Expires 0
</FilesMatch>

PHPで動的に出力する場合：

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 1 Jan 2000 00:00:00 GMT");

3. ファイル名そのものを変更する（ハッシュ付きファイル名）

デプロイ時にファイル名を変更することで確実にキャッシュから除外。

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

4. Service Workerでキャッシュ管理（PWA対応時）

PWAなどを利用している場合、Service Workerで明示的にキャッシュ制御が可能。

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/index.html?v=1.0.0',
        '/style.css?v=1.0.0'
      ]);
    })
  );
});

5. CMSやWordPress環境でのキャッシュ対応

• キャッシュ系プラグインで「キャッシュ削除」を明示的に行う

• テーマ内のリンクタグに ?v=<?php echo time(); ?> を挿入してキャッシュバスティング

ゲーム公式サイトでは以下のような更新が頻繁に発生します。

• イベント告知
• DLC配信情報
• アップデート情報
• キャンペーンバナー
• Steam販売ページへのリンク

更新したにも関わらず古い情報が表示される場合、キャッシュが原因となっているケースがあります。

特にリリース日やキャンペーン期間の修正時は注意が必要です。

CloudflareやCDNを利用している場合

ブラウザキャッシュを削除しても更新が反映されない場合は、CDNキャッシュが残っている可能性があります。

代表的なCDNには以下があります。

• Cloudflare
• CloudFront
• Fastly

CDNは世界中にコンテンツを配信する仕組みですが、更新直後は古いデータを保持している場合があります。

その際は管理画面からキャッシュ削除（Purge Cache）を実行します。

スーパーリロードとは何ですか？

通常の再読み込みより強制的に最新ファイルを取得する機能です。

キャッシュクリアしても更新されません

CDNキャッシュやサーバーキャッシュが残っている可能性があります。

time()とfilemtime()はどちらがおすすめですか？

開発環境ではtime()、本番環境ではfilemtime()がおすすめです。

スマートフォンでもキャッシュは保存されますか？

iPhoneやAndroidのブラウザでもキャッシュは保存されます。

個人的ですがPCのキャッシュよりスマートフォンのキャッシュがとても強く感じています。

ブラウザで手動でキャッシュクリアしてもファイルが更新されないことが多いです。

夢双合同会社では、

• ゲーム公式サイト制作
• Steam向けLP制作
• インディーゲームサイト制作
• リッチアニメーション実装
• SEO/AIOを意識した構成設計
• SNS連動型Web制作

など、ゲーム業界向けのWeb制作を行っています。

RPG・FPS・ノベルゲーム・アクションなど、ジャンルごとの世界観に合わせたデザイン・演出設計にも対応しています。

新作タイトルのプロモーションサイト制作や、既存サイトの見直しについてお悩みの方は、お気軽にご相談ください。

企画段階からのご相談にも対応しており、「何から考えればいいか分からない」といった状態でも問題ありません。

内容を整理しながら、最適なサイトの方向性をご提案いたします。

実際にご相談いただくケースでも、「まだ具体的な要件が固まっていない」という段階からスタートすることがほとんどです。

そのため、初期の方向性整理から伴走する形でサポートしています。

制作実績 → https://6sou.site/works.php

壁打ち相談はこちら → https://6sou.site/contact.php

X official account → https://x.com/MUSOU_LLC