CSSが効かない原因まとめ｜反映されない・上書きできない時の確認 – devsakaso

CSSを書いたのに効かない、反映されない、上書きできない、というトラブルはよくあります。

原因はいくつかありますが、いきなり !important を付けるより、読み込み、セレクタ、記述ミス、詳細度、順番、キャッシュの順に確認した方が安全です。

この記事では、CSSが効かない原因を20個に分けて、初心者向けに確認手順をまとめます。

1. CSSファイルが読み込まれていない

外部CSSの場合は、まず link タグでCSSファイルが読み込まれているか確認します。

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

ブラウザの検証ツールでNetworkを開き、CSSファイルが404になっていないか確認します。

2. CSSファイルのパスが間違っている

ファイル名、フォルダ階層、拡張子が違うとCSSは反映されません。

<!-- HTMLと同じ階層にstyle.cssがある場合 -->
<link rel="stylesheet" href="./style.css">

<!-- cssフォルダ内にある場合 -->
<link rel="stylesheet" href="./css/style.css">

大文字小文字が区別される環境もあるため、ファイル名は完全に一致させます。

3. class名やid名がHTMLと一致していない

HTMLのclass名とCSSのセレクタが一致しているか確認します。

<div class="card">カード</div>

.card {
  padding: 20px;
}

card と cards のような小さな違いでも効かなくなります。

4. classセレクタのドットを書き忘れている

classを指定するときは、CSS側にドットが必要です。

/* NG: cardタグを探してしまう */
card {
  padding: 20px;
}

/* OK: class="card" に当たる */
.card {
  padding: 20px;
}

idの場合は #id名、classの場合は .class名 です。

5. HTMLの構造とセレクタが合っていない

親子関係を含むセレクタは、HTML構造が違うと当たりません。

.article .button {
  color: red;
}

この指定は、article クラスの中にある button クラスにだけ効きます。

6. プロパティ名を間違えている

CSSのプロパティ名にスペルミスがあると、その行は無視されます。

/* NG */
.box {
  backgrond: #f8fafc;
}

/* OK */
.box {
  background: #f8fafc;
}

検証ツールで打ち消しや警告が出ていないか確認します。

7. 値の書き方が間違っている

プロパティは正しくても、値が不正だと反映されません。

/* NG */
.box {
  width: 300;
}

/* OK */
.box {
  width: 300px;
}

長さには px、%、rem などの単位が必要な場合があります。

8. セミコロンや波括弧が抜けている

閉じ忘れがあると、その後のCSSまで崩れることがあります。

/* NG */
.box {
  color: red
  background: #fff;

/* OK */
.box {
  color: red;
  background: #fff;
}

フォーマッターを使うと、閉じ忘れに気づきやすくなります。

9. コメントが閉じられていない

CSSコメントの閉じ忘れも、反映されない原因になります。

/* NG: コメントが閉じていない
.box {
  color: red;
}

/* OK */
.box {
  color: red;
}

/* を書いたら、必ず */ で閉じます。

10. 後に書いたCSSで上書きされている

詳細度が同じ場合は、後に書いたCSSが優先されます。

.title {
  color: blue;
}

.title {
  color: red;
}

この場合、文字色は後に書いた red になります。

11. 詳細度で負けている

同じ要素に複数のCSSが当たっている場合、詳細度が高い指定が優先されます。

.button {
  color: blue;
}

.article .button {
  color: red;
}

この場合は、.article .button の方が強いです。詳しくは CSS詳細度とはで解説しています。

12. inline styleに負けている

HTMLに直接書かれたstyle属性は、通常のclass指定より強くなります。

<p class="text" style="color: red;">文章</p>

.text {
  color: blue;
}

この場合、基本的にはstyle属性の red が優先されます。

13. `!important` に負けている

別のCSSに !important が付いていると、通常の指定では上書きしにくくなります。

.button {
  color: red !important;
}

!important を増やす前に、どのCSSが付けているのか確認します。

14. メディアクエリの条件が合っていない

画面幅の条件に入っていないと、その中のCSSは効きません。

@media (min-width: 768px) {
  .box {
    display: grid;
  }
}

このCSSは、画面幅が768px以上のときだけ効きます。

15. インライン要素に幅や高さを指定している

span や a などのインライン要素は、幅や高さが期待通り効かないことがあります。

.tag {
  display: inline-block;
  width: 120px;
  height: 40px;
}

幅や高さを指定したい場合は、inline-block や block にします。displayの基本は CSS displayの使い方で扱います。

16. positionの基準になる親がない

position: absolute; は、基準になる親がないと想定外の位置に配置されます。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

親に position: relative; を指定するのが基本です。

17. z-indexの条件を満たしていない

z-index は、基本的にposition指定や重なり文脈と関係します。

.box {
  position: relative;
  z-index: 10;
}

重なり順で困る場合は、z-indexが効かない原因を確認します。

18. flexやgridを指定する場所が違う

横並びにしたい場合、親要素に display: flex; や display: grid; を指定します。

<div class="list">
  <div>1</div>
  <div>2</div>
</div>

.list {
  display: flex;
  gap: 16px;
}

子要素ではなく、並べたい要素を包む親に指定します。

19. キャッシュで古いCSSが残っている

CSSを変更したのに反映されない場合、ブラウザやキャッシュプラグインが古いCSSを使っていることがあります。

ブラウザをハードリロードする
キャッシュプラグインを削除する
開発者ツールでCSSファイルの中身が更新されているか見る
ファイル名やクエリ文字列でキャッシュを更新する

WordPressでは、テーマやプラグインのキャッシュも確認します。

20. 検証ツールで見ていない

CSSが効かないときは、ブラウザの検証ツールで対象要素を選ぶのが早いです。

そのCSSが読み込まれているか
セレクタが対象要素に当たっているか
打ち消し線で無効になっていないか
どのCSSに上書きされているか
メディアクエリの条件に入っているか

打ち消し線が付いているCSSは、別の指定に負けています。

CSSが効かないときの確認順

CSSファイルが読み込まれているか確認する
セレクタがHTMLに合っているか確認する
プロパティ名、値、括弧、コメントを確認する
検証ツールで上書きや詳細度を見る
キャッシュを削除して再確認する

まとめ

CSSが効かないときは、読み込み、パス、セレクタ、記述ミス、詳細度、順番、キャッシュの順に確認します。

むやみに !important を増やすより、検証ツールで「当たっていないのか」「当たっているけど負けているのか」を分ける方が、あとから直しやすくなります。