---
title: "CSSだけキャッシュが残るときの原因と直し方"
description: "HTMLは更新されたのにCSSだけキャッシュが残ってデザインが古いままになる問題に悩む担当者向けに、CDN・ブラウザ・プロキシの各レイヤーでキャッシュを消す手順を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/css-cache-remains-fix"
markdown: "https://giga-site.com/articles/css-cache-remains-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# CSSだけキャッシュが残るときの原因と直し方

HTMLを更新したのにCSSだけ古いままで見た目が変わらない現象は、CSS専用のキャッシュがHTMLとは独立したTTLで管理されているために起きます。CSSキャッシュが残るしくみを理解したうえで、素早く解消する具体的な手順を紹介します。

> Source HTML: https://giga-site.com/articles/css-cache-remains-fix
> Article index: https://giga-site.com/articles/index.md

## よくある原因

CSSだけキャッシュが残る最大の原因は、`Cache-Control: max-age=31536000`のような長いTTLがCSSファイルに設定されていることです。HTMLはno-cacheやshort-TTLで頻繁に更新されてもCSSは1年分キャッシュされる設定になっていると、HTMLが変わってもブラウザが古いCSSを使い続けます。サーバーまたはCDNのキャッシュルールを確認し、CSSのTTLを見直してください。

ファイル名が同じCSSを上書きした場合も古いキャッシュが残ります。`style.css`を同名で差し替えても、ブラウザはURLが同じなら以前キャッシュしたファイルを使い続けます。これを防ぐにはCSSのURLを変える「キャッシュバスティング」が有効で、`style.v2.css`や`style.css?v=20240115`のようにバージョン情報をURLに含めると強制的に新しいファイルが読み込まれます。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

DevToolsのNetworkタブでCSSファイルを選択し、レスポンスヘッダーの`Cache-Control`と`Age`を確認してください。`Age`の値がTTLに近い大きな数値になっていれば、CDNがCSSをキャッシュしています。`ETag`がHTMLのレスポンスと比べて古い日時を示していれば、CSSファイルは更新されていないか古いキャッシュが配信されています。

すぐに解決したいなら、HTMLの`<link>`タグのhref属性にクエリパラメータを追加してください。例えば`<link rel="stylesheet" href="style.css?v=2">`のように変更するだけでブラウザは別ファイルとして扱います。この変更はHTMLファイルだけで完結するため、CSSファイル本体を変えずにキャッシュを破棄させられます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

相手にCSSキャッシュが残っている可能性があるときは「開発者ツールを開いた状態（F12を押した後）でCTRL+F5でページをリロードしてください」と伝えてください。開発者ツールが開いているときだけ「キャッシュを無効化」設定が有効になる場合があり（Chromeのネットワークタブの「Disable cache」チェックボックス）、この操作でCSSを含む全リソースが再取得されます。

相手のブラウザがまったく古いCSSを手放さない場合は、`about:settings`またはChromeのSettings→Privacy→Clear browsing dataから「Cached images and files」を削除してもらいましょう。「過去1時間」の範囲で削除すれば他のサイトへの影響を最小限にしたままCSSキャッシュをクリアできます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

CSSを静的ファイルとして管理しているなら、ビルドパイプラインにコンテンツハッシュを付けるツールを組み込んでください。WebpackやViteはデフォルトでハッシュ付きファイル名を生成します。手動管理のHTMLであれば、更新のたびにlink要素のhrefのクエリパラメータを日付ベースで更新するルールをチームで共有してください。

CDN側でCSSのキャッシュルールを見直すことも重要です。HTMLは`Cache-Control: no-store`か`max-age=0`にして常に最新を配信し、CSSはコンテンツハッシュ付きURLにして`max-age=31536000, immutable`で長期キャッシュを活用するという二層戦略が業界標準です。両方を適切に設定することでパフォーマンスと更新反映の両立が実現できます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### CSSファイルを差し替えずにCSSキャッシュだけを無効化できますか？

HTMLの`<link>`タグのhrefにクエリパラメータを追加すれば、CSSファイル本体を変えずにブラウザに再取得させられます。`style.css?v=2`のように変えるだけで有効です。

### CDNのキャッシュパージをしたのにまだCSSが古いまま表示される場合は？

ブラウザ側のローカルキャッシュにまだ古いCSSが残っている可能性があります。ハードリフレッシュ（Ctrl+Shift+R）を試し、それでも変わらなければブラウザの「サイトデータを削除」でCSSも含めてクリアしてください。

### 同じCSSを複数のHTMLページが使っている場合、一ページだけCSSバージョンを上げると他ページに影響しますか？

影響します。クエリパラメータはファイルURLごとに独立するため、一ページだけ`style.css?v=2`にすると他ページの`style.css?v=1`は古いキャッシュを使い続けます。共通CSSを更新した場合はすべてのHTMLのクエリパラメータを同時に更新してください。

## 関連記事

- [CSSだけキャッシュが残るときに共有前に確認するチェックリスト](https://giga-site.com/articles/css-cache-remains-checklist/index.md)
- [CSSだけキャッシュが残る問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/css-cache-remains-ai-prompt/index.md)
- [CSSだけキャッシュが残るときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/css-cache-remains-request-message/index.md)
- [ファビコンが更新されないときの原因と直し方](https://giga-site.com/articles/favicon-cache-fix/index.md)
- [ファビコンが更新されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/favicon-cache-checklist/index.md)
- [ファビコンが更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/favicon-cache-ai-prompt/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSSだけキャッシュが残るときの原因と直し方",
  "description": "HTMLは更新されたのにCSSだけキャッシュが残ってデザインが古いままになる問題に悩む担当者向けに、CDN・ブラウザ・プロキシの各レイヤーでキャッシュを消す手順を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/css-cache-remains-fix",
  "url": "https://giga-site.com/articles/css-cache-remains-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "CSSファイルを差し替えずにCSSキャッシュだけを無効化できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLの`<link>`タグのhrefにクエリパラメータを追加すれば、CSSファイル本体を変えずにブラウザに再取得させられます。`style.css?v=2`のように変えるだけで有効です。"
      }
    },
    {
      "@type": "Question",
      "name": "CDNのキャッシュパージをしたのにまだCSSが古いまま表示される場合は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザ側のローカルキャッシュにまだ古いCSSが残っている可能性があります。ハードリフレッシュ（Ctrl+Shift+R）を試し、それでも変わらなければブラウザの「サイトデータを削除」でCSSも含めてクリアしてください。"
      }
    },
    {
      "@type": "Question",
      "name": "同じCSSを複数のHTMLページが使っている場合、一ページだけCSSバージョンを上げると他ページに影響しますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "影響します。クエリパラメータはファイルURLごとに独立するため、一ページだけ`style.css?v=2`にすると他ページの`style.css?v=1`は古いキャッシュを使い続けます。共通CSSを更新した場合はすべてのHTMLのクエリパラメータを同時に更新してください。"
      }
    }
  ]
}
```