これで解決!スタイルシート(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. しげぞう より:

    >新福岡人様

    こちらこそありがとうございます。私自身最近はtableは使わない場合が増えてきています。スマートフォンやタブレット等に対応させるレスポンシブデザインを考える時にtableは結構面倒です。画面が狭くなるとtableが縦に伸びたような見た目になるのでスマートフォン用のtable表示を色々変更して考える必要がでてきますので。

    私も最近になってレスポンシブデザインの勉強やjavascript、jQueryの勉強を始めたら楽しくてブログ更新がおろそかになっています(笑)また近いうちに今度はHTMLやCSS、javascript等を解説するサイトを作れたらいいなと思っています、というか絶対作ります。そのためのインプット作業中です。

    これからブログやホームページ作成をする方の参考になるようなサイトを作りたいと思っていますので今後ともどうぞよろしくお願い致します。

  2. 新福岡人 より:

    ご返信有難うございます!
    スマホサイトの編集につきましては、一度ご教示の通り「tableを使わないでdivを使って枠組みを作る」こと等を含めて試行錯誤してみたいと思います。
    スマホサイトでcssが使えないのは残念ですが、見やすいページ作りを目指して頑張っていきます!

    私自身はアフィリエイトに興味があり、現在はブログで日記作成しながら、文章作成やホームページ・タグの勉強中です。
    最初は一歩を踏み出せなかったのですが、実践してみるとブログ作成も面白いですね!
    ただ、本業もありますので、ブログ更新がままならないのが悩みですが(苦笑)

    今後、勉強のために貴サイトを活用して、スキルアップしていきたいと思いますので、また何かありましたら宜しくお願い致します。

  3. しげぞう より:

    >新福岡人様

    コメントありがとうございます。私も試してみましたが、tableのCSSはPCでは反映されますが、スマホ用では反映されてませんね。tableにidやclass名を付けてもスマホ版では反映されてません。要素を調べてみた所、シーサーブログのスマホ版ではあらかじめtableのCSSが決まっているのではないかと思います。そのため、PCでは反映されてもスマホ版では反映されないのだと思います。

    スマートフォン用のCSSは「シーサー管理画面」⇒「デザイン」⇒「スマートフォン」⇒「デザイン一覧」と進み、適応中のテンプレートを選択するとCSSが書けます。そこに書けば反映されました。初歩的な部分でのうっかりでした、すみません。

  4. 新福岡人 より:

    しげぞうさん、はじめまして。
    現在、アフィリエイト開設のためにブログを勉強しておる者です。
    シーサーブログを開設しており、しげぞうさんのサイトを参考にカスタマイズの勉強をさせていただいております。

    最近、ブログ内にテーブルを作成し、背景色、文字色をcssに記載しました。
    ところが、PCサイトではキチンと反映されているのですが、スマートホンサイトでは背景色、文字色が全く反映されません。

    ソースは以下のように記述しております。
    (投稿欄HTML)

    所要時間約4時間~4時間30分
    運賃(およそ)約15,000円~

    (css)
    .accessdata {
       border=”1″;
       border-collapse=”collapse”;
    }
    .dai{
     background-color:#556b2f;
     color: #ffffff;
     font-weight:bold;
    }
    .naiyou{
     background-color:#f5fffa;
    }

    テーブルの型だけはどうやら反映されているみたいですが、文字色…黒、背景色…白でしか映し出されません。

    なぜこういった現象が起きるのか、全くわからず途方に暮れております。
    お忙しい中恐縮ですが、ご教示くださいませんか。

  5. しげぞう より:

    >miho-away様

    コメントありがとうございます。サイドバーが下に行ってしまったという事はブログの幅の調整が間違えている事が考えられます。サイドバーと記事本文の横幅がブログ全体の横幅より大きくなってしまったのでサイドバーが下に行ってしまった可能性があります。一度CSSをメモ帳等に全部コピーしておいて、最近追加したカスタマイズのコードを削除してみるといいかもしれません。特にブログの幅、サイドバーの幅を変更したのであればおそらくそれが原因ではないかと思います。

    また、どうしても分からないという場合はブログのURLを教えて下さい。ブログのURLはコメント公開前に削除しますので。実際にブログを見れば原因も分かるかと思います。

  6. miho-away より:

    パソコン初心者のmiho-awayといいます。
    アフィリエイトに以前から興味があり貴方様のサイトにたどり着きました。
    Seesaaブログに登録し、カスタム法を参考に順調に触っていたのに、更新時に通信障害?が起きたのか訳のわからない設定になってしまいました。

    サイドにあったコンテンツ類が全て下にいってしまい、設定→コンテンツで見てもちゃんとサイドになっているのに一体どこがおかしくなってしまったのか全然見つけられず途方に暮れています。

    本当に始めたばかりで三記事しかなく、記事原文はexcelにあるので、一度ブログを削除してやり直すべきか悩んでいます。

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