これで解決！スタイルシート（CSS）が反映されない原因と対処方法まとめ

このサイトでアメブロとかSeesaaブログとかWordPressのカスタマイズ書いてるのですが、カスタマイズ系の記事って質問コメントがめっちゃくちゃ多いです。

↑自分が返信した分もありますし、全てがカスタマイズ系の記事へのコメントではないんですが、それでもカスタマイズ記事への質問多いです。

そんなカスタマイズ系の記事で多いのが「スタイルシート（CSS）記述したけど反映されない！原因は何でしょう？」という質問です。

また今後もこういう質問来るかなと思うので一度記事にしておく事にしました。

もしもへ

Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由

Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...

affiliate150.com

2022.06.12

CSSが反映されない原因別の対処方法

ほんとに特殊な例を除いて基本的には次のような原因があります。

• CSSの記述ミス
• CSS記述する場所間違ってる
• キャッシュが残っている
• 別のコードが優先されていてCSSが反映されない

１．CSSの記述ミスが原因の場合の対処方法

これは一番最初の確認事項ですが、そもそもCSSの記述にミスがないか確認します。

今回新規に追加した記述の部分だけでなく、以前に追加した記述にミスがあるって場合もかなり多いです。

以前に追加した記述で記述ミスがある場合は、それ以降のCSSが効かない場合があります。以前の記述なので気が付かない事が多いです。

そのため、反映されないcssの記述をCSSの一番最初に追加して反映されるか確認します。

CSSの一番最初の方に追加して反映される場合は以前の記述にミスがある可能性が高いです。

以前に追加した記述で記述ミスがないか確認。特に閉じタグ「 } 」がない場合が多いのでチェックしてみて下さい。

よくある記述ミスのランキング！

よくある記述ミスをランキングにしてみました。私がやらかす順でランキングしてます。

1. 閉じタグ「 } 」が抜けてる
2. 「;」と「：」を間違っている
3. 半角ではなく全角スペースになってる
4. 「”」と「”」など全角になっているミス
5. プロパティや値のスペルミス

半角と全角問題は結構あります、特にスペースの半角と全角などは本当にウォーリーを探すよりも難しいときがあります。

２．CSSを記述する場所が間違っている場合

スタイルシート（CSS）は後から書いたもの（下に書いたもの）が優先的に反映されます。

同じ記述が複数重複するのは問題ないですが、反映されるのは後から書いたものです。

.entry-content p {
  font-size:16px;
}

.box {
  margin:20px 0; 
}

.entry-content p {
  font-size:12px;
}

「.entry-content p」の「font-size（文字の大きさ）」が２回記述されてますが、反映されるのは後から書いた「12px」の方です。

なので基本的にCSSを記述する場合はCSSの一番下（最後）に追加して行けばOKです。

一番下に追加してみてCSSが反映されないならそれはその記述、もしくはそれ以前の記述にミスがある可能性があります。

３．ブラウザにキャッシュが残っていて反映されない場合と対処方法

ブラウザにキャッシュ（以前のデータ）が残っているためにCSSが反映されない事があります。

キャッシュを消したりする前にまずはリロード（再読込み）して確認してみます。

• Windowsの場合：[F5]キーを押す。
• Macの場合：[Command]キーと[R]を押す。

これでリロード（再読み込み）をする事ができるので試してみて下さい。また、それでも反映されない場合は次の手順も試します。

• Windowsの場合：「Ctrl」と一緒に「F5」を押す。
• Macの場合：「Command」と「Shift」と「R」を一緒に押す。

こっちは強制再読み込み（スパーリロード）。

リロードしても上手く反映されない場合は一度別のブラウザで確認するか、別の端末（スマホ・タブレット・PC）で確認してみて下さい。

別のブラウザや端末でCSSが反映されているならブラウザのキャッシュが原因と思われます。

キャシュの消し方はブラウザによって違うので検索して調べてみて下さい。

４．別のコードが優先されていてCSSが反映されない

スタイルシート（CSS）で変更しても優先度が上の要素の影響を受けて変更が反映されない場合があります。

セレクタを詳しく指定した方が優先順位が高くなりますが、セレクタって何？という方が多いと思いますので、変更した記述に「!important」を付けてみて下さい。

●● {
margin-right:0px !important;
}

こんな感じで、優先したい部分に「!important」を付けるとそれが優先されます。

「!important」つけて反映されない場合はやはりCSSの記述ミスを疑います。

他の方のサイトのコードをコピペしている場合などはそもそものコードが間違っている事もあります（私も時々あります）。

WordPressのスタイルシート（CSS）で「×」マークがでる場合の対処方法

WordPressのスタイルシートはエラーチェック機能が装備されているので、「！」とか「×」マークで間違いをお知らせしてくれます。

「！」マークは特に問題なくても表示される場合がありますが、「×」が出る部分は修正する必要がありますので、上記に書いた原因と対処を試してみて下さい。

特に問題ないと思っても上記のように「×」マークが表示される場合は次の事を試してみて下さい。

• 全角のスペースを半角のスペースに変更
• コメントアウトの部分を削除

全角スペースになっている部分を半角に変更

先程も書いたのですがスペース部分が全角になっている場合があります。

例）「font-size」の前の部分に全角のスペースを半角のスペースに変更。

コメントアウト前後のスペースを削除してみる

/*〜*/の間に書かれた部分は「コメントアウト」。要はCSSの記述に自分なりのメモを残す事ができます。

このコメントが原因でなぜか「×」マークが付いている時がありますのがこれもコメントアウト前後のスペースが原因の事が多いです。

コメントアウト前後のスペースを削除してみるか一度コメントアウトの部分を削除ｓて「×」が消えるか確認してみて下さい。

以上スタイルシート（CSS）が反映されない原因と対処方法でした。

なお、コメント自体は大歓迎ですが、最近はホントに時間のある時だけしかコメントの返信できてませんのでご了承下さいませ。

• ⇒アフィリエイトの始め方と稼ぐ方法まとめ
• ⇒初心者でも迷わないWordPressの始め方や使い方まとめ！