CSSの変更が反映されない原因は？デベロッパーツールを使った確認方法と対処法まとめ

CSSを書いたけど反映されない…

HTMLとCSSを使ったカスタマイズでは、思わぬ原因でスタイルが適用されないことがよくあります。せっかく時間をかけて書いたコードや、正しいはずのコピペコードが動かないと本当に困ってしまいますよね。

CSSが反映されない原因は、記述ミスの他、ブラウザのキャッシュやスタイルの競合、優先度の問題などさまざまです。この記事では、デベロッパーツールを使ってCSSの適用状況を確認する方法と、反映されないときの具体的な対処法をわかりやすく解説します。

「CSSが効かない…」と悩んでいる方は、ぜひこの記事を参考にしてスムーズに問題を解決しましょう！

INDEX

デベロッパーツールを使うメリットとは？
デベロッパーツールの開き方
デベロッパーツールでCSSの反映を確認する方法
CSSが反映されている場合のチェックポイント
CSSが反映されない場合の原因と対処法
CSSが反映されない原因としてのキャッシュ問題
1. ブラウザキャッシュのクリア
2. ワードプレスキャッシュのクリア
まとめ：デベロッパーツールでCSSの適用状態をしっかり確認しよう

デベロッパーツールを使うメリットとは？

CSSが反映されないとき、最初に試してほしいのがデベロッパーツールを使った確認です。このツールを活用することで反映されない原因を効率的に特定できます。使い方をマスターしておくとトラブルシューティングがスムーズになります。

デベロッパーツールを使うことで、以下のようなメリットがあります。

エラーや競合の原因を特定しやすい
HTMLやCSSの構造が一目でわかる
リアルタイムでCSSを確認・編集できる
レスポンシブデザインのチェックが可能

CSSの適用状況を正確に把握し、素早く問題を解決するためにデベロッパーツールを活用しましょう。

目次に戻る

デベロッパーツールの開き方

デベロッパーツールは主要なブラウザで利用可能です。以下の方法で開くことができます。

Google Chrome / Microsoft Edge
- F12キー または Ctrl + Shift + I
- 右クリック → 検証 を選択

目次に戻る

デベロッパーツールでCSSの反映を確認する方法

デベロッパーツールでCSSの適用状況を確認する手順を紹介します。

対象の要素を選択
- 確認したい要素を右クリック
  - デベロッパーツールの Elements（または 要素）タブを開く
適用されているCSSをチェック
- Styles（または スタイル）タブで適用されているCSSを確認

選択したHTML要素に自分で追加したCSSが表示されているかどうか。（元々の親テーマのCSSではなく、自分で追加したCSSの内容です）

表示されていれば反映されている
表示されていれば反映されていない

目次に戻る

CSSが反映されている場合のチェックポイント

追加したCSSが反映されているにもかかわらず期待通りのスタイルが適用されない場合、以下の点を確認しましょう。

CSSの優先度を確認する

CSSの優先度が低いと他のスタイルに上書きされている可能性があります。以下の方法で優先度を確認してください。

デベロッパーツールのStylesタブを開き、該当要素に適用されているスタイルを確認します。
打ち消し線（取り消し線）がついているスタイルは、他のスタイルによって上書きされています。

/* 例：このスタイルは優先度が低く、上書きされている */
.header {
    background-color: red;
}

CSSのセレクタには、以下のように優先度があります。

CSSのセレクタの優先度を確認する

CSSセレクタの優先度は以下の順で高くなります。

!important を指定したルール
インラインスタイル（ style="..." ）
IDセレクタ（ #id ）
クラス・属性・擬似クラス（ .class :hover など）
タグセレクタ（ div p など）

!important を指定したルール

.header {
     background-color: red !important;
}

特定のスタイルを強制的に適用したい場合、!importantを使用します。

注意： !importantの多用は管理が難しくなるため、必要な場合にのみ使いましょう。

インラインスタイル

<div style="color: red;">

IDセレクタ

#header {
    background-color: blue;
}

クラスセレクタ

.header {
    background-color: red;
}

タグセレクタ

h2 {
    background-color: green;
}

CSSのセレクタが適切か確認する

適用するセレクタが意図した要素に正しく紐づいていない場合があります。クラスやIDの指定方法が適切か、HTMLとの整合性を確認してください。

基本的にクラスセレクタを使用し、一貫性を持たせる。
セレクタが詳細すぎる場合、簡略化を検討する。

同じ優先度のセレクタが競合する場合、CSSファイル内で後に記述されたものが優先されます。

CSSの優先順位については下記ページで詳しく記載しているのでご確認ください。

Cocoonカスタマイズ｜HTML・CSSの編集とワードプレスをバックアップする方法

サイトのデザインや機能を向上させるためにHTML・CSSのカスタマイズは有用ですが、初めて取り組む場合は戸惑うこともありますよね。この記事では、ワードプレスのバックアップ方法やHTML・CSSの編集手順について詳しく解説します。作業に入る前...

CSSの記述場所の確認

CSSが反映されない原因として、CSSの記述場所が適切でない場合があります。以下の順序でCSSが適用されることを理解し、適切な場所に記述するようにしましょう。

CSSが適用される順番

ワードプレスのカスタマイザー「追加CSS」
投稿ページ内「カスタムCSS」
テーマ設定
子テーマのスタイルシート（子テーマを使用している場合）
親テーマのスタイルシート (style.css)

対策

基本的には、子テーマのスタイルシートに統一して記述することをおすすめします。

メディアクエリ

メディアクエリは画面サイズやデバイスの種類に応じてスタイルを適用するためのCSSの機能です。これを正しく理解しないと意図したスタイルが表示されない場合があります。

例：画面幅600px以下の場合に適用されるCSS

以下の例では、画面幅が600ピクセル以下のときに背景色を変更するスタイルを記述しています。

@media (max-width: 600px) {
    .header {
        background-color: blue;
    }
}

注意点
- このスタイルは、画面幅が600px以下でなければ適用されません。デスクトップブラウザでの確認時に適用されない場合、条件に合っているかをデベロッパーツールで確認しましょう。

他のスタイルと競合しない記述を

メディアクエリやCSSの優先度を考慮し、意図したスタイルが他のスタイルに打ち消されないよう修正しましょう。

目次に戻る

CSSが反映されない場合の原因と対処法

CSSが適用されない場合、以下の要因が考えられます。

HTMLの書き間違い

コードは基本的に１文字でも間違いがあると反映されません。

HTMLに誤りがあるとCSSが正しく適用されません。特に以下の点を確認してください。

タグの閉じ忘れや入れ子の誤り
クラスやIDのスペルミス

<!-- 閉じタグを誤った例 -->
<div class="header>
    <h1>Welcome to my site</h1>
<div><!-- 間違い -->

<!-- 正しい例 -->
<div class="header">
    <h1>Welcome to my site</h1>
</div><!-- 正しい -->

<!-- headerのスペルミスの例 -->
<div class="heder"> <!-- 間違い -->
    <h1>Welcome to my site</h1>
</div>

<!-- 正しい例 -->
<div class="header"> <!-- 正しい -->
    <h1>Welcome to my site</h1>
</div>

CSSの構文エラー

CSSに構文エラーがあると特定のスタイルが適用されません。以下によくある間違いをリストアップします。初心者でも確認しやすいポイントを押さえましょう。

よくあるミス例と解決策

セレクタの記述ミス

クラス（class）セレクタ

× 間違い： header { ... }

〇正解： .header { ... }

クラスセレクタの前には必ず.（半角ピリオド）をつけます。

IDセレクタ

× 間違い： header { ... }

〇正解： #header { ... }

IDセレクタの前には必ず#（半角シャープ）をつけます。

プロパティの区切り記号 ; の抜け
- 各プロパティを区切るときには ;（半角セミコロン）を忘れないようにします。

/*  間違い  */
.header {
    background-color: red
    color: white;
}

/*  正解  */
.header {
    background-color: red;
    color: white;
}

閉じカッコ } のミス

/* 抜けている場合 */

/*  間違い  */
.header {
    color: white;

/*  正解  */
.header {
    color: white;
}

/* 多すぎる場合 */

/*  間違い  */
.header {
    color: white;
    }
}

/*  正解  */
.header {
    color: white;
}

コメントアウトのミス
CSSのコメントアウトは/* ... */で囲む必要があります。

/*  間違い  */
// このスタイルは無効化されています

/*  正解  */
/* このスタイルは無効化されています */

全角スペースの混入
- 特にコピーペーストや日本語入力後に発生しやすく、見つけにくいので注意してください。

/*  間違い  */
.header　{ /* 全角スペースが入っています */  
    color: white;  
}

/*  正解  */
.header { /* 半角スペースに修正 */  
    color: white;
}

CSSの構文エラーは見つけにくいものも多いですが、基本のポイントを抑えて慎重に確認すれば解決できます。特に、セレクタ記述や記号の抜け、スペースの確認に注意しましょう。

インラインスタイルやJavaScriptによる上書き

インラインスタイル（HTMLタグ内にスタイルを直接入力する方法）やJavaScriptによってスタイルが上書きされている場合もあります。デベロッパーツールで、該当の要素にインラインスタイルが設定されていないか確認します。

<!-- インラインスタイルの例 -->
<div class="header" style="background-color: yellow;">
    <h1>Welcome to my site</h1>
</div>

CSSは効かない×

/*CSSで設定*/
.header{
     background-color: pink;/*背景色をピンクにしたい*/
}

HTMLで直接インラインスタイルstyle="background-color: yellow;"が入っているため、上記のCSSは反映されません。

不要なスペース（文字列）の削除

コードをコピペした際に不正な文字列が入ってしまうことがあります。

CSSの前後のスペースを削除しましょう。

私の経験上、コード自体に間違いがないのに、CSSの前後のスペースを消したりコードを整列するだけで反映されることが多々あります。

コードのインデント（整列）

コードをスペースまたはタブキーで整列することをおすすめします。

スペース：半角スペース4つ分（一般的に4スペース）で1レベルのインデントとすることが多いです。
タブ：タブキーを押してインデントを設定します（設定によってはタブ1つがスペース4つ分に相当します）

/* インデントなし */
body {
font-family: Arial, sans-serif;
color: #333;
}
.header {
background-color: #f5f5f5;
padding: 20px;
}

/* インデントあり（スペース4つの場合） */
body {
    font-family: Arial, sans-serif;
    color: #333;
}
.header {
    background-color: #f5f5f5;
    padding: 20px;
}

CSSコードのインデントは他にも以下のメリットがあります。