ワードプレスでCSSが反映されない原因は？確認することと対処法

この記事では、CSSが正しく反映されない場合に確認すべきポイントと対処法について解説します。

HTMLとCSSを使ってカスタマイズした際に反映されないことがよくあります。せっかく頑張って書いたCSSが効いてくれないと困ってしまいますよね。

大きく分けると確認するのはこの３点ですが、圧倒的に多いのは初歩的な③スペルミスや構文エラーです。反映されない原因を徹底的に探しましょう！

CSSが反映されているかをデベロッパーツールで確認

CSSが反映されないときに一番最初にするべきことが、デベロッパーツールでのCSS確認。

まず、デベロッパーツールを開きます。

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

この操作で、画面の右側にデベロッパーツールが開かれます。

デベロッパーツールを使用すると、ページのHTML構造や適用されているCSSを直接確認できます。コードが並んでいて基本上段はHTML、下段がCSSになっています。（レイアウトは変更可能）

ここで、カスタマイズしたい対象のHTML要素に、追加したCSSが反映されているかを確認しましょう。

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

確認ポイント

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

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

CSSが反映されているが、スタイルが適用されていない場合、以下の点を確認します。

CSSの優先度

デベロッパーツールで該当の要素を選択し、Stylesタブで適用されているスタイルを確認します。下記のように打ち消し線がついているプロパティはありませんか？

.header {
    background-color: red;
}

CSSの優先度が低いために、他のスタイルに上書きされている可能性があります。優先度を確認しましょう。

指定するセレクタによる優先度

基本はセレクタをclass（クラス）に統一しておけば、優先度に困ることは少ないです。

• CSSに指定するセレクタ（高い順）
  1. ID
  2. class
  3. HTMLタグ
• セレクタが同じレベルの場合、CSSファイルの下にあるものほど優先される
• 最優先は!important;がついているもの

①に＋して指定するセレクタの詳細度が高い方が優先度は上がります。

優先度の例

CSSに指定するセレクタもの優先度の高い順に記載しています。

/* セレクタの詳細度が高い*/
body .header {
    background-color: green;
}

/* セレクタにID指定 */#header {
    background-color: blue;
}

/* セレクタにクラス指定 */
.header {
    background-color: red;
}

/* セレクタにHTMLタグ指定 */
h2 {
    background-color: red;
}

特定のスタイルが適用されない場合、!importantを使って強制的に適用することも考慮します。

!importantは多用すべきではありませんが、他のスタイルが強くどうしても打ち消しされてしまう場合などに使用します。

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

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

CSSの記述場所の確認

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

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

メディアクエリ

メディアクエリは、スタイルを特定のデバイスに応じて変更するためのCSSの機能。たとえば、スマートフォン、タブレット、デスクトップパソコンなどの異なる画面サイズに応じて、レイアウトを調整することができます。

メディアクエリの条件に合わないためにスタイルが適用されていない可能性もあります。デベロッパーツールで、現在の表示サイズやデバイスの種類に応じて適用されているCSSを確認します。

このCSSメディアクエリは、画面の幅が600ピクセル以下の場合に適用される特定のスタイルを定義しています。したがってパソコンで閲覧の際には適用されません。

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

以上の優先度を考慮して、他で指定されているスタイルに打ち消しされない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><!-- 正しい -->

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

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

CSSの構文エラー

CSSファイルに構文エラーがあると特定のスタイルが適用されません。よくある間違いを記載します。

• セレクタがclass（クラス）のとき：先頭に .（半角ピリオド）をつけていない
• セレクタがIDのとき：先頭に #（半角シャープ）をつけていない
• 複数のプロパティを区切る ;（半角セミコロン）が抜けている
• 閉じカッコ　}（半角）が抜けている、または多い
• 見えないところに全角スペースが入っている（※見つけにくいです）

/* 間違い（セレクタにはクラス使用） */
header {
    background-color: red
    color:black;

/* 正しい例 */
.header {
    background-color: red;
    color:black;}

他にも原因はたくさん…

• CSSセレクタは対象のHTML要素ときちんと合っているか
• プロパティの記述に誤りはないか

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

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

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

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

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

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

• 見やすさの向上
• メンテナンスの容易さ
• コードの構造の把握

普段から綺麗なコード記述を心がけましょう。

CSSのエラーチェックに活用できるサイト

以下のサイトで、CSSのエラーチェックができとても便利です。

確認したいCSSのコードを直接入力して使用します。

【共通】キャッシュのクリア

ブラウザやワードプレスのキャッシュが原因で変更が反映されないことがよくあります。以下の方法でキャッシュをクリアしてみてください。

ブラウザキャッシュのクリア

• Google Chrome: 設定 > プライバシーとセキュリティ > 閲覧履歴データの削除
• Firefox: 設定 > プライバシーとセキュリティ > クッキーとサイトデータ > データの消去

ワードプレスキャッシュのクリア

• キャッシュプラグインを使用している場合は、プラグインのキャッシュをクリア（またはプラグインを無効化すると反映された事例がありました）
• テーマ側のキャッシュ機能をオフにすることも検討してください。

まとめ

CSSが反映されない場合、デベロッパーツールを活用して原因を特定することが重要です。

チェックするべきポイント。

これらの手順を踏むことで、CSSの問題を効率的に解決できます。初歩的な全角スペースがどこかに入っている、スペルミスや構文エラーが圧倒的に多いの根気よく確認しましょう！

反映されない悩みが解決しますように。

この記事は以上です。