この記事では、CSSが正しく反映されない場合に確認すべきポイントと対処法について解説します。
![](https://turicco.com/wp-content/uploads/2023/10/1698138838065-150x150.png)
CSSを書いたけど反映されない…
HTMLとCSSを使ってカスタマイズした際に反映されないことがよくあります。せっかく頑張って書いたコードはもちろん、コピペOKのはずなのに効いてくれないと困ってしまいますよね。
大きく分けると確認するのはこの3点ですが、圧倒的に多いのは「ちょっとした書き間違い」や「余計なスペースが入る」ことです。反映されない原因を徹底的に探しましょう。
CSSが反映されているかをデベロッパーツールで確認
CSSが反映されないときに一番最初にするべきことが、デベロッパーツールでのCSS確認。
![](https://turicco.com/wp-content/uploads/2023/10/1698139110995-150x150.png)
ベロッパーツールなんて使ったことないよ~
数多くあるCSSが効かない原因から絞り込んで推測できる
やみくもに考えても解決まで遠回りになるので、使ったことがない場合でも活用することをおすすめします。
まず、デベロッパーツールを開いてみましょう。
デベロッパーツールの開き方
- Google Chrome: 右クリック > 検証 またはF12
![デベロッパーツール](https://turicco.com/wp-content/uploads/2024/07/developer-11.jpg)
この操作で、画面の右側にデベロッパーツールが開かれます。
デベロッパーツールを使用すると、ページのHTML構造や適用されているCSSを直接確認できます。コードが並んでいて基本上段はHTML、下段がCSSになっています。(レイアウトは変更可能)
![](https://turicco.com/wp-content/uploads/2024/03/developer.png)
ここで、カスタマイズしたい対象のHTML要素に、追加したCSSが反映されているかを確認しましょう。
デベロッパーツールでの確認方法
選択したHTML要素に自分で追加したCSSが表示されているかどうか。(元々の親テーマのCSSではなく、自分で追加したCSSの内容です)
- 表示されていれば反映されている
- 表示されていれば反映されていない
![](https://turicco.com/wp-content/uploads/2024/06/developer84.png)
デベロッパーツールを使ったCSSセレクタ(クラスやID)の調べ方はこちらの記事でご確認ください。
確認ポイント
カスタマイズしたい対象の要素に追加したCSSが反映されている場合と反映されていない場合に分けて、確認すべきポイントをピックアップしていきます。
【CSSが反映されている場合】の確認事項
![イメージ画像/pc/css](https://turicco.com/wp-content/uploads/2022/10/css.png)
CSSが反映されているが、スタイルが適用されていない場合は以下の点を確認します。
CSSの優先度
デベロッパーツールで該当の要素を選択し、Styles
タブで適用されているスタイルを確認します。下記のように打ち消し線がついているプロパティはありませんか?
.header {
background-color: red;
}
CSSの優先度が低いために、他のスタイルに上書きされているがあります。優先度を確認しましょう。
指定するセレクタによる優先度
対策:基本はセレクタをclass(クラス)に統一しておきます。
- CSSに指定するセレクタ(高い順)
- ID
- class
- 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が適用されることを理解しましょう。
- ワードプレスのカスタマイザー「追加CSS」
- 投稿ページ内「カスタムCSS」
- テーマ設定
- 子テーマのスタイルシート(子テーマを使用している場合)
- 親テーマのスタイルシート (
style.css
)
対策:基本は、記述場所を子テーマのスタイルシートに統一しておきます。
メディアクエリ
メディアクエリは、スタイルを特定のデバイスに応じて変更するためのCSSの機能。たとえば、スマートフォン、タブレット、デスクトップパソコンなどの異なる画面サイズに応じて、レイアウトを調整することができます。
メディアクエリの条件に合わないためにスタイルが適用されていない可能性もあります。デベロッパーツールで、現在の表示サイズやデバイスの種類に応じて適用されているCSSを確認します。
このCSSメディアクエリは、画面の幅が600ピクセル以下の場合に適用される特定のスタイルを定義しています。したがってパソコンで閲覧の際には適用されません。
@media (max-width: 600px) {
.header {
background-color: blue;
}
}
以上の優先度を考慮して、他で指定されているスタイルに打ち消しされないCSSの記述に修正しましょう。
【CSSが反映されていない場合】の確認事項
![イメージ画像/コードHTML](https://turicco.com/wp-content/uploads/2022/10/code-2.png)
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(クラス)のとき:先頭に .(半角ピリオド)をつけていない
- セレクタがIDのとき:先頭に #(半角シャープ)をつけていない
- 複数のプロパティを区切る ;(半角セミコロン)が抜けている
- 閉じカッコ }(半角)が抜けている、または多い
- コメントアウトが間違っている:/**/で囲む必要があります
- 見えないところに全角スペースが入っている(※とても見つけにくいです)
/* 間違い(クラスセレクタに .半角ピリオドをつけていない)*/
header {
background-color: red;
color:black;
}
/* 正しい例 */
.header {
background-color: red;
color:black;
}
/* 間違い(区切りの;半角セミコロンが抜けている */
.header {
background-color: red
color:black;
}
/* 正しい例 */
.header {
background-color: red;
color:black;
}
/* 間違い(閉じカッコ } が抜けている */
.header {
background-color: red
color:black;
/* 正しい例 */
.header {
background-color: red;
color:black;
}
/* 間違い(コメントアウトが誤っている)*/
///ヘッダーのスタイルを変更 ***///
.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の前後のスペースを削除しましょう。
![](https://turicco.com/wp-content/uploads/2023/07/1690628323192.png)
私の経験上、コード自体に間違いがないのに、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 Validation Service」ではCSSのエラーチェックができとても便利です。
確認したいCSSのコードを直接入力して使用します。
![](https://turicco.com/wp-content/uploads/2024/06/css-check-tool.png)
【共通】キャッシュの影響
![](https://turicco.com/wp-content/uploads/2024/06/cache.png)
ブラウザやワードプレスのキャッシュが原因で変更が反映されないことがよくあります。以下の方法でキャッシュをクリアしてみてください。
ブラウザキャッシュのクリア
- Google Chrome: 設定 > プライバシーとセキュリティ > 閲覧履歴データの削除
- Firefox: 設定 > プライバシーとセキュリティ > クッキーとサイトデータ > データの消去
ワードプレスキャッシュのクリア
- キャッシュプラグインを使用している場合は、プラグインのキャッシュをクリア(またはプラグインを無効化すると反映された事例がありました)
- テーマ側のキャッシュ機能をオフにすることも検討してください。
まとめ
CSSが反映されない場合、デベロッパーツールを活用して原因を特定することが重要です。
チェックするべきポイント。
- CSSの優先度
- CSSの記述場所
- メディアクエリなど
- スペルミス
- 構文エラー
- インラインスタイル
- コードのインデント(整列)
これらの手順を踏むことで、CSSの問題を効率的に解決できます。初歩的な全角スペースがどこかに入っている、スペルミスや書き間違いが圧倒的に多いの根気よく確認しましょう!
また、解決できない際はこちらの記事(Cocoon公式)もご覧ください。キャッシュについてなど、反映されないときの対策がより具体的に書いてあります。
この記事を読んだ方の悩みが解決しますように。
この記事は以上です。
Comment コメントはこちらへ