cssが効かない対策まとめ(Google ChromeやSafariで反映されない場合も)

プログラミング

cssは簡単だけど、効かないということがよくあるトラブルです…。chromeなどブラウザ別やスマホなどcssが効かない原因を解決方法を網羅しました。

とりえあえず、なんか問題がでたら加筆してブラッシュアップしていきます。

Chrome(クローム)やSafariなど一部のブラウザでcss(スタイルシート)が効かない原因

chromeでcss(スタイルシート)が効かない・反映されないとき、原因はキャッシュかもしれません。今回の場合、firefoxだけ効いていました。

その他の原因は、構文チェックツールとchrome developer toolsを使った方がいいかもしれません。キャッシュ系じゃないと確信している人はキャッシュのところは読み飛ばしてください。

スポンサーリンク

電子書籍のおすすめ比較

キャッシュが原因でcssが効かない

キャッシュ系はちゃんとコードはかけているのにキャッシュの問題だけで時間を使ってしまうのは大変無駄です。はやめにクリアしたいですね。

ブラウザのキャッシュをクリアする前に、WP Fastest Cacheなどキャッシュ系のプラグインをクリアする方が先!?

キャッシュ系のプラグインを使っている場合、注意事項があります。

ブラウザのキャッシュをクリアする前に、プラグインのキャッシュをクリアすることです。プラグインのキャッシュクリア → ブラウザのキャッシュクリア

キャッシュ系のプラグインを使っていると、ブラウザのキャッシュをクリアしてもなおらないことがあります。

chromeのキャッシュの削除方法

右上の設定アイコン > その他のツール > 閲覧履歴の削除

期間は「すべて」に設定します。
「閲覧履歴」「ダウンロード履歴」「Cookieなどのサイトデータやプラグインデータ」「キャッシュされた画像とファイル」と4項目にチェックボックスが入っていますが、「キャッシュされた画像とファイル」だけクリアすればいける気がいます。「閲覧履歴」は消したくなかったので、個人的に削除しませんでした。

chromeで特定のサイトのキャッシュを削除する方法

特定のサイトのみ削除したい場合は Google Developer Toolsを使います。

  • 右クリニック > 検証
  • Applicationのタブを開く
  • 左カラムのClear Strageを選択する
  • 削除する項目を選択し、下部のClear site data をクリックする

Safariのキャッシュの削除方法

Safari>環境設定>プライバシー>すべてのWebサイトデーターを削除>削除したいドメインを入力>選択して削除

*バージョンにより多少名前や操作が異なる可能性があります。

firefoxのキャッシュの削除方法

右上メニュー > 設定 > プライバシーとセキュリティ > Cookieを個別に削除 > 検索に「ドメイン名を入力」 > 選択したCookieを削除

*バージョンにより多少名前や操作が異なる可能性があります。

スポンサーリンク

WP Fastest Cacheのcssのチェックは危険!?(追記)

WP Fastest Cacheという有名なキャッシュ系のプラグインがありますよね。

以前、一部のブラウザで子テーマの一部のcssが反映されず困ってことがあります。WP Fastest Cacheの下記に設定をはすしたらなおりましたね。

CSS ファイルを圧縮する
CSS ファイルを結合してHTTPリクエスト数を減らす

ファイル結合って意外と弊害もありますよね。。キャッシュ系のプラグインについては詳しくはこちらをみてください。

効果が高いキャッシュ・高速化のWordpressプラグイン徹底比較、おすすめはどれ!?
Wordpressの高速化をはかるために、必要な知識とWordpressのプラグインをまとめておきます。キャッシュのプラグインといえば、とにかくトラブルが多い!画面が真っ白になったり、500のサーバーエラーがでたり…。そのためプラグインを選...

CSS構文チェックツールでエラーを洗い出す

CSS構文チェックツールで確認しましょう、ツールを利用すると簡単に原因がわかりますよ。エラーがあって効いていない場合もありますし、
エラーがあることはそもそもよくないので、ついでになおしてしまいましょう。

CSSやPHPの構文チェックツール/Chromeデベロッパーツールのスマホサイトのデバッグ
cssやphpなどの構文チェックツール、Chromeデベロッパーツールのスマホサイトのデバッグについて簡潔にまとめていきます。 cssの構文チェックツール cssの構文チェックツールはいくつかでていますが、こちらがおすすめかも。...
スポンサーリンク

chrome developer toolsでcssの状況を把握

chrome developer toolsの使い方は簡単で、Chromeブラウザにもともと組み込まれた、開発者向けのツールです。

右クリック > 検証

検索ボックスでcssの名前で検索します。
CSSデータは、後から指定されたものが優先度高くなります。2重線(打ち消し線)になっている場合は、より優先度の高い他の要素により、打ち消されて無効となっていることを示しています。

chrome developer toolsのcssのアドレスがキャッシュのアドレスになっている場合もある

chrome developer toolsのcssはどのスタイルシートが適応されているのかがわかります。

cssのアドレスにマウスオーバーすると「https://xxx.com/wp-content/cache/…」と表示される場合はキャッシュが適応されています。

wordpressに直入力ではなく、codepenでhtmlとcssを入力して検証

codepenを利用して、追加したコードだけ検証する方法もあります。プラグインやブラウザ依存の問題を回避できた状態で検証できます。

うまく動かないコードをコピペすればいいだけですからすぐできます。詳しくはこちらです。

CSSやPHPの構文チェックツール/Chromeデベロッパーツールのスマホサイトのデバッグ
cssやphpなどの構文チェックツール、Chromeデベロッパーツールのスマホサイトのデバッグについて簡潔にまとめていきます。 cssの構文チェックツール cssの構文チェックツールはいくつかでていますが、こちらがおすすめかも。...

全ブラウザでcssが読み込まない。よくある凡ミスとは!?

よくあるのが途中でcssがコケていることですね。

括弧のつけ忘れやら、;がなかったり、いわゆる凡ミスです。

最後に追加するのではなく最初に追加すると効く場合があります。その場合、以前追加したcssのコードがどこかおかしくそれ以降効いていないですね。構文チェックツールを使いましょう。

CSSやPHPの構文チェックツール/Chromeデベロッパーツールのスマホサイトのデバッグ
cssやphpなどの構文チェックツール、Chromeデベロッパーツールのスマホサイトのデバッグについて簡潔にまとめていきます。 cssの構文チェックツール cssの構文チェックツールはいくつかでていますが、こちらがおすすめかも。...

iPhoneやAndroidなどスマホのみcssが効かない

スマホのブラウザのキャッシュをクリアしても改善されない場合は、Wordpressのキャッシュ系のプラグインが悪さをしていることがあります。以前、WP Fastest Cacheをクリアしたらなおったことがあります。

キャッシュ系のプラグインはこちらにまとめてあります。

効果が高いキャッシュ・高速化のWordpressプラグイン徹底比較、おすすめはどれ!?
Wordpressの高速化をはかるために、必要な知識とWordpressのプラグインをまとめておきます。キャッシュのプラグインといえば、とにかくトラブルが多い!画面が真っ白になったり、500のサーバーエラーがでたり…。そのためプラグインを選...

もしくは@media screenを切り分けているのをうっかりと忘れているとかですかね。。

それでもダメならChromeデベロッパーツールでCSSのデバッグをします。

CSSやPHPの構文チェックツール/Chromeデベロッパーツールのスマホサイトのデバッグ
cssやphpなどの構文チェックツール、Chromeデベロッパーツールのスマホサイトのデバッグについて簡潔にまとめていきます。 cssの構文チェックツール cssの構文チェックツールはいくつかでていますが、こちらがおすすめかも。...

ブラウザ固有の仕様を確認する

ブラウザ固有のcssサポート問題もあります。…昔、firefoxでbeforeが効かないなんてこともありました。

css程度でもう悩みたくない人におすすめサイト!

無料のオンラインプログラミング体験や有料コースを検討したらどうでしょうか?

プログラミングスクールオンライン比較/おすすめで安い(無料)のプログラム教室!
エンジニア・プログラマーになりたい人のために、オンライン版のプログラミングスクール比較していきます。初心者大人向けにおすすめで安いプログラム教室も紹介しますよ。 個人的にはブログを運営しているためwordpressのphpやcssもカ...

ユーデミーは書籍より安い価格でプログラミングが動画学習できます。

udemy(ユーデミー社)の口コミ・評判。セールはいつどのぐらいの期間なの?
udemyが日本に上陸する前から知っていたユーデミユーザーで英語の技術系コンテンツをよく買っていました。 udemyとは動画学習サイトです。個人的にはグラフィックやプログラミングの動画をお買い物をすることが多いですが、fxやヨガ、カメ...

便利なプログラムの質問掲示板はこちらです。

【評判】レバレジーズteratail(テラテイル)の口コミ、利用してみた感想
teratail(テラテイル)は時々利用しているユーザーなのですが、感想としては会員の質がいいですね。 プログラムの質問掲示板、レバレジーズteratail(テラテイル)の口コミ・評判 プログラミングの質問ある人は多いと...
人気記事  【無料あり】おすすめで安いオンラインプログラミングスクール比較
  1. プログラミングスクールは格安に!cssやphpも楽勝に!
  2. 電子書籍並みの価格で買える格安のプログラム動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
プログラミング
neruをフォローする
スポンサーリンク
ebookbrain

コメント

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