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

スタイルシート(CSS)が反映されない原因と対処方法サイト作成に役立つツール・素材・HTML・CSS

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

コメント数12月

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

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

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

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

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

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

1.CSSの記述ミスが原因の場合の対処方法

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

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

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

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

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

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

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

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

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

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

2.CSSを記述する場所が間違っている場合

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

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

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

.box {
  margin:20px 0; 
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressでのCSSが反映されない

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

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

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

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

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

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

WordPressでのCSSが反映されない場合の対処1

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

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

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

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

WordPressでのCSSが反映されない場合の対処2

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

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

コメント

  1. PoN より:

    いつも参考にさせていただいております。
    このような、アフィリエイトのやり方だけではなくPCの操作についての解説もあるのはありがたいです。

  2. しげぞう より:

    >ゆうこ様

    コメントありがとうございます。サーバー側の問題かブラウザのキャッシュの問題だろうと思います。私も時々似たような事がありますが、反映されていないと思ったときには別のブラウザで確認するようにしています。それで反映されていれば時間が経てば解消できている場合が多いです。またできない部分があればいつでもコメント下さい。今後もよろしくお願い致します。

  3. ゆうこ より:

    返信ありがとうございます。
    seesaaに入り、確認したところ反映されていました。
    確認のため、再度色の変更を試みてみました。
    やはり直ぐには反映されず、反映されるまでに2時間は要したと思います。
    ただ、以前にも何回か同じ作業を繰り返し行なっても、直ぐに反映できていたので、
    なぜという気持ちは残りますが。。
    まずは1つ解決できました、ありがとうございました。
    ご親切な対応ありがとうございました。

  4. しげぞう より:

    >ゆうこ様

    コメントありがとうございます。レビューで確認したときには反映されているという事なので、コードは間違っていないと思われます。原因としてはブラウザのキャッシュが怪しいですが、ブログを表示してF5を押し、リロードしても変わらないのであればURLを教えて頂けると助かります。もしかすると別に原因があるかも知れません。URLはコメント公開時には削除しますのでもし良かったら教えて下さい。お手数ですが、よろしくお願い致します。

  5. ゆうこ より:

    お世話になります。
    ブログ初心者です。
    いつも参考にさせて頂いています。
    ブログタイトル、ブログ説明の文字の色の変更をスタイルシートで変更し、
    レビューで確認し、変更されてるのを確認して、保存しても、反映されていません。
    CSSが対応されていない場合の対処法も試させて頂きましたが、結果に変化が見られません。
    どの様な原因が考えられますでしょうか。
    アドバイス頂ければ幸いです。
    よろしくお願いします。

  6. しげぞう より:

    >新福岡人様

    先日シーサーブログのスマートフォンでのCSSについての質問があったのですが、シーサーブログの管理画面⇒「デザイン」⇒「スマートフォンのタブ」を選択して「デザイン一覧」をクリック。そして適応中の自分のテンプレートを選択する事でスマートフォン用のCSSを編集できました。

    スマートフォンの用のCSSにテーブルのCSSを追加する事で可能でした。気づかなくてすみません。

タイトルとURLをコピーしました