この記事の要点

CSS の変更が反映されない原因の 8 割は ブラウザキャッシュ。まずは Ctrl+Shift+R (Mac: Cmd+Shift+R) で強制再読込 直らない場合は DevTools (F12) を開いて Network タブの "Disable cache" をチェック 本番では クエリ文字列でキャッシュバスター (style.css?v=20260518) または ハッシュ付きファイル名 (style.abc123.css) を使う Service Worker / CDN (Cloudflare) / リバースプロキシのキャッシュも疑う → Cloudflare Purge / Cache-Control: no-cache 反映されているのに「効いていない」場合は Specificity (詳細度) の負け → DevTools の Computed タブで打ち消し元を特定し !important または詳細度を上げる

原因の切り分けフロー

まず「変更が読み込まれていない」のか「読み込まれているが効いていない」のかを切り分けます。

確認	方法	該当する場合
ファイルが新しい内容になっているか	DevTools → Sources → 該当 CSS を開き、編集行が反映されているか	古い → キャッシュ (対処 1〜4)
セレクタにマッチしているか	DevTools → Elements → 該当要素 → Styles に表示されるか	表示なし → セレクタミス (対処 5)
取り消し線がついているか	DevTools → Styles で property に取り消し線	詳細度の負け (対処 6)
Computed 値が違うか	DevTools → Computed	別ルールに上書きされている (対処 6)

対処1: ブラウザの強制再読込 (スーパーリロード)

もっとも多いのがブラウザの HTTP キャッシュです。通常のリロード (F5) では CSS が再取得されない場合があります。

OS / ブラウザ	強制再読込
Windows / Chrome / Edge / Firefox	Ctrl + Shift + R または Ctrl + F5
Mac / Chrome / Safari	Cmd + Shift + R
Chrome (開発時)	DevTools を開いたままリロードボタンを右クリック → 「キャッシュの消去とハード再読込」

対処2: DevTools で Disable cache

開発中は DevTools を開いている間だけキャッシュを完全無効化できます:

1. F12 で DevTools を開く
2. Network タブを開く
3. 上部の Disable cache にチェック
4. DevTools が開いている間はリロードでキャッシュ無効

対処3: クエリ文字列によるキャッシュバスター

本番環境ではエンドユーザーのブラウザキャッシュ対策が必須です。?v=... を付けて URL を変えると別リソースとして取得されます:

対処4: Webpack / Vite / Laravel Mix のハッシュ付きファイル名

モダンなビルドツールは出力ファイル名にハッシュを含めるのが標準です:

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // style.abc123.css のようにハッシュ付与
        assetFileNames: 'assets/[name].[hash][extname]',
        entryFileNames: 'assets/[name].[hash].js',
      },
    },
  },
});

// webpack.config.js
module.exports = {
  output: {
    filename: '[name].[contenthash].js',
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
  ],
};

ファイル内容が変わったときだけハッシュが変わるので、変更時は確実に新 URLになり、変わらないときは長期キャッシュが効きます。

対処5: Service Worker / CDN キャッシュ

PWA で Service Worker が登録されていると、ブラウザより手前で CSS をキャッシュします。Cloudflare 等の CDN も同様です。

// DevTools の Application タブ → Service Workers → Unregister
// または JS で削除
navigator.serviceWorker.getRegistrations().then(rs => {
  rs.forEach(r => r.unregister());
});

// Cache Storage も削除
caches.keys().then(keys => keys.forEach(k => caches.delete(k)));

Cloudflare の場合: ダッシュボード → Caching → Configuration → Purge Everything。または URL 単位で Purge by URL。

対処6: 詳細度 (Specificity) の負け

CSS が読み込まれているのに効かない場合、他のルールに上書きされている可能性があります。DevTools の Styles タブで取り消し線がついている property を確認します。

セレクタ	詳細度 (a, b, c)	備考
*	0, 0, 0	ユニバーサルセレクタ
p / div	0, 0, 1	要素セレクタ
.btn	0, 1, 0	クラス / 属性 / 擬似クラス
#header	1, 0, 0	ID
style="..."	インライン	クラスより強い
!important	最強	濫用禁止

/* 詳細度の例 */
.btn { color: red; }              /* (0,1,0) */
nav .btn { color: blue; }          /* (0,1,1) → 勝つ */
#header .btn { color: green; }     /* (1,1,0) → さらに勝つ */
button.btn { color: orange !important; } /* !important で全勝ち */

/* 詳細度を上げる定番テク */
.btn.btn { color: red; }           /* (0,2,0) クラス重ね */
body .btn { color: red; }          /* (0,1,1) 親要素追加 */

対処7: その他チェックリスト

• セレクタの綴りミス: .btn-primaly ↔ .btn-primary
• HTML との不一致: class="btn primary" に対し .btn-primary は当たらない
• シンタックスエラー: セミコロン抜け / 中括弧不整合で以降のルールが全部死ぬ
• CSS 順序: 後勝ち。style.css の後に override.css を読み込む
• SCSS のネスト崩壊: &:hover の & 抜け
• Tailwind の Purge: 動的クラス名 (bg-${color}-500) は削られる → safelist 設定

キャッシュバスターをデプロイ自動化

# Git の commit hash をクエリにする例 (PHP)
$ver = trim(shell_exec('git rev-parse --short HEAD'));
echo "";

# Nginx で常に no-cache (開発環境)
location ~* \.css$ {
    add_header Cache-Control "no-store, must-revalidate";
}

# 本番では逆に長期キャッシュ + ハッシュ付与
location ~* \.[0-9a-f]{8,}\.(css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

FAQ

Q: シークレットウィンドウなら反映される
A: 確実にブラウザキャッシュです。クエリ文字列 or ハッシュ付きファイル名を導入してください。

Q: 自分の PC では反映されないが他人のは反映される
A: ローカルブラウザキャッシュか拡張機能 (広告ブロッカー等) の干渉。Ctrl+Shift+Delete でキャッシュ消去。

Q: !important を付けても効かない
A: 既に !important が上にある or インラインスタイルで上書きされている。DevTools で確認。