CSSの変更が反映されないときのチェックリスト

「CSSを書いたのに反映されない」「CSSを変更しても反映されない」ときは、勘で書き直すよりキャッシュ → 読み込み → 上書き → 記述ミスの順で確認すると原因を早く絞れます。 DevToolsでブラウザが受け取ったファイルと、最終的に勝ったルールを確認しましょう。

A practical checklist for finding why your CSS changes are not taking effect — from browser cache and failed stylesheet requests to specificity, overrides, and syntax errors.

TL;DR

1. ハードリロードする。直ればブラウザキャッシュが原因
2. Networkタブで対象CSSが200で返り、内容も新しいことを確認
3. ElementsのStyles欄で取り消し線を探し、どのルールに上書きされたか確認
4. CSSの詳細度と!importantを確認し、最後にセレクタや構文のミスを調べる

1. ブラウザキャッシュを消す / Check the browser cache

最も多い原因は、ブラウザが変更前のCSSをキャッシュから表示していることです。Windows / LinuxではCtrl + Shift + R、MacではCmd + Shift + Rでハードリロードしてください。通常の再読み込みだけでは古いCSSが残る場合があります。

継続して確認するなら、DevToolsを開き、Networkタブの「キャッシュを無効化（Disable cache）」にチェックを入れて再読み込みします。この設定は通常、DevToolsを開いている間だけ有効です。

2. CSSファイルが読み込まれているか / Verify the stylesheet request

Networkタブを開いて再読み込みし、種類をCSSに絞ります。対象ファイルへのリクエストがあり、Statusが200か確認してください。404なら<link>要素のhrefパス、 リクエスト自体が無ければlink要素や読み込み条件を見直します。

<!-- 相対パスの基準を間違えていないか確認 -->
<link rel="stylesheet" href="/styles/main.css" />

200でもResponseを開き、変更した宣言が含まれるか検索します。含まれなければビルドツールが古いCSSを 出力している可能性があります。開発サーバーの再起動や、所定のビルドキャッシュ削除後に再ビルドします。

3. CSSの詳細度を確認する / Understand specificity

CSSの詳細度（Specificity）は、おおむねインラインstyle > ID > クラス・属性・疑似クラス > 要素型の順で強くなります。詳細度が異なる場合は記述順ではなく詳細度が高いルールが優先され、 詳細度が同じ場合に限り後に書かれたルールが勝ちます。

/* 要素型: 0-0-1 */
p { color: gray; }

/* クラス: 0-1-0。後にある p より優先される */
.notice { color: blue; }
p { color: green; }

/* ID: 1-0-0。クラスより優先される */
#message { color: red; }

/* インラインstyleは通常のセレクタより強い */
<p id="message" class="notice" style="color: purple">Text</p>

CSSを上書きするためにセレクタを長くし続けると保守が難しくなります。勝っているルールを特定し、 不要な指定を除くか、同じ責務のルール同士で詳細度を揃えるのが安全です。

4. !importantとCSSオーバーライドを探す / Find the winning override

対象要素を右クリックして「検証」を選び、Elements（Firefoxではインスペクター）パネルのStyles欄を見ます。取り消し線が引かれたプロパティは、別の宣言に上書きされて無効になったルールです。 同じプロパティの取り消し線がない宣言を探し、ファイル名と行番号から上書き元へ移動します。

/* この宣言が別の場所にあると */
.alert { color: red !important; }

/* 通常の詳細度を上げても上書きできない */
#content .alert { color: blue; }

!important付きの宣言は通常の詳細度計算より優先されます。複数あれば、その中で詳細度と記述順が 比較されます。Styles欄で取り消し線と!importantを探し、可能なら原因側の不要な指定を削除します。

5. 見落としやすい記述ミス / Check selectors and syntax

• タイプミス: profile-cardに対して.profle-cardと書いていないか
• 大文字・小文字: クラス名は区別されるため、.Cardと.cardは別物
• 構文エラー: 直前の}、コメントの*/、値の引用符を閉じ忘れていないか
• 対象違い: 選択した要素に想定したクラスが実際に付いているか

/* 閉じ波括弧がないと、後続ルールも無効になることがある */
.card {
  padding: 16px;

.card__title {
  color: navy;
}

CSSファイル自体の構文エラーでは、その箇所以降のルールが無効になることがあります。Consoleの警告と Styles欄を確認し、問題のルールだけでなく直前の行も調べてください。

6. 原因切り分けの最短手順 / A reliable debugging order

7. CSSカスタムプロパティ(変数)が反映されない / CSS custom properties not applying

var(--main-color)のようなCSSカスタムプロパティは、変数名のタイプミスや 定義漏れがあってもエラーにならず、黙って初期値または継承値にフォールバックします。 「反映されない」原因が変数名の綴り違いであることは珍しくありません。

:root {
  --brand-color: #4f46e5;
}

.button {
  /* タイプミス: --brnad-color は定義されていない */
  color: var(--brnad-color, black); /* 第2引数のフォールバック値(black)が常に使われる */
}

DevToolsのStyles欄では、未定義の変数を使った宣言もエラー表示されないため見落としやすいです。var()の第2引数にフォールバック値を指定していないか、Computed欄で実際に 適用された値を確認してください。

8. Tailwind CSS特有の罠:本番ビルドでクラスが消える / Tailwind: classes purged in production

Tailwind CSSはcontent設定で指定したファイルを静的にスキャンし、 実際に見つかった完全な形のクラス名だけをビルド後のCSSに含めます。 文字列を組み立てて動的にクラス名を生成すると、スキャナーがそのクラスを見つけられず、 開発環境では動いていたのに本番ビルドだけスタイルが消える事故につながります。

// 動的に組み立てたクラス名はスキャンで検出されないため避ける
const color = "red";
<div className={`text-${color}-500`} />

// 完全な形のクラス名をコード内にliteralで存在させる
const colorClass = color === "red" ? "text-red-500" : "text-blue-500";
<div className={colorClass} />

「開発サーバーでは表示されるのにnpm run build後だけ消える」という症状が出たら、 まずクラス名を動的生成していないか疑ってください。

9. English summary

Start with a hard reload: Ctrl + Shift + R on Windows/Linux orCmd + Shift + R on Mac. Enable Disable cache and verify that the CSS request returns 200 and contains your latest code. Inspect the element and find crossed-out declarations. Specificity generally ranks inline styles above IDs, classes/attributes/pseudo-classes, and element selectors; source order decides only when specificity is equal. Check for !important, selector typos, case mismatches, and earlier syntax errors.

よくある質問 / FAQ

CSSを変更しても反映されないとき、最初に何を確認すべきですか?

まずブラウザキャッシュを疑い、Ctrl+Shift+RまたはCmd+Shift+Rでハードリロードします。DevToolsのNetworkタブにあるDisable cacheも利用できます。

CSSの詳細度が同じ場合はどのルールが優先されますか?

詳細度が同じなら後に書かれたルールが優先されます。詳細度が異なる場合は記述順より詳細度の高いルールが優先されます。

How can I see why a CSS declaration is not applied?

Inspect the element and check the Styles pane. A crossed-out declaration has been overridden by another rule.

関連ツール / Related tools

• CSS Generator - CSSプロパティをプレビューしながら生成
• CSS Flexbox Generator
• CSS Grid Generator

関連ガイド / Related guides

• CSS中央寄せの方法まとめ / How to center in CSS
• CSS aspect-ratioで比率を固定する / CSS aspect-ratio guide