CSSが反映されない原因を徹底解説！確認すべきポイントと具体的な対処法

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

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

この記事では、CSSが反映されない場合の確認すべきポイントや具体的な対処法を詳しく解説します。特に多い原因である「優先度の競合」「書き間違い」「キャッシュの影響」を中心に、初心者の方でも分かりやすい内容になっています。

ぜひ最後まで読んでCSSトラブルを解決しましょう！

Contents

デベロッパーツールを使ってCSSの反映状態を確認する方法

CSSが反映されないとき、最初に試してほしいのがデベロッパーツールを使った確認です。このツールを活用すれば反映されない原因を効率よく絞り込むことができます。

デベロッパーツールは初心者でも簡単に使える便利な機能です。HTMLやCSSのカスタマイズをおこなう際には必須と言えるほど役立ちます。ぜひこの機会に使い方を覚えておきましょう。

ベロッパーツールなんて使ったことないよ～

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

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

反映されていないCSSの原因を特定できる
HTMLやCSSの構造が一目でわかる
修正内容をリアルタイムで確認できる

やみくもに探すより効率的なので、時間を節約できます！

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

デベロッパーツールを開く方法はブラウザによって異なりますが、代表的な例は以下の通りです。

Google Chrome: 右クリック > 検証またはF12

ページ内の対象要素を右クリックして「検証」を選択
HTMLとCSSの構造が表示される（上段がHTML、下段がCSS）

デベロッパーツールでの確認方法

対象の要素に適用されているCSSを確認します。

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

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

デベロッパーツールを使ったCSSセレクタ（クラスやID）の調べ方はこちらの記事でご確認ください。

ChromeデベロッパーツールでCSSセレクタ（クラスやID）を調べる方法

このような方向けの記事ですCSSを使ったカスタマイズに興味がある初心者でHTMLとCSSについての基本を知りたいデベロッパーツールの使い方を知っておきたい「デベロッパーツールを使えないとCSSは書けません」と断言できるほど、ウェブデザインの...

確認ポイント

カスタマイズしたい対象の要素に追加したCSSが反映されている場合と反映されていない場合に分けて、確認すべきポイントをピックアップしていきます。

CSSが反映されている場合

CSSの優先度に問題がないか
CSSの記述場所は適切か
メディアクエリが正しく設定されているか

詳細を見る

CSSが反映されていない場合

コードの書き間違いがないか
他のスタイルに上書きされていないか
ブラウザキャッシュの影響はないか

詳細を見る

目次に戻る

【CSSが反映されている場合】の確認事項

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

CSSの優先度を確認する

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

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

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

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

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

IDセレクタ（最優先）

#header {
    background-color: blue;
}

クラスセレクタ

.header {
    background-color: red;
}

HTMLタグセレクタ（優先度が低い）

h2 {
    background-color: green;
}

詳細度が高いセレクタ（複雑な組み合わせ）

body .header {
    background-color: green;
}

同じ優先度のセレクタが競合する場合
- CSSファイル内で後に記述されたものが優先されます。
重要なスタイルには!importantを活用
- 特定のスタイルを強制的に適用したい場合、!importantを使用します。
- 注意： !importantの多用は管理が難しくなるため、必要な場合にのみ使いましょう。

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

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の優先度を考慮し、意図したスタイルが他のスタイルに打ち消されないよう修正しましょう。特定のスタイルが適用されない場合、優先順位を上げるためにセレクタの詳細度を上げるか必要に応じて!importantを使うことも検討しましょう。

目次に戻る

【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;  
}

エラーがないかチェックする方法

デベロッパーツールで確認
デベロッパーツールを使って、エラーが発生している箇所を特定します。
- Stylesタブで該当のスタイルが適用されているかを確認。
- 表示されないスタイルの記述を重点的に見直しましょう。

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コードのインデントは他にも以下のメリットがあります。