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

cssは簡単だけど、効かないということがよくあるトラブルです・・・。

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

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

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

スポンサーリンク

電子書籍のおすすめ比較

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

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のプラグインをまとめておきます。キャッシュのプラグインといえば、とに...

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

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

CSSやPHPの構文チェックツール/Chromeデベロッパーツールのスマホサイトのデバッグ
cssやphpなどの構文チェックツール、Chromeデベロッパーツールのスマホサイトのデバッグについて簡潔にまとめていきます。 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やPHPの構文チェックツール/Chromeデベロッパーツールのスマホサイトのデバッグ
cssやphpなどの構文チェックツール、Chromeデベロッパーツールのスマホサイトのデバッグについて簡潔にまとめていきます。 css...

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

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

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

効果が高いキャッシュ・高速化のWordpressプラグイン徹底比較、おすすめはどれ!?
Wordpressの高速化をはかるために、必要な知識とWordpressのプラグインをまとめておきます。キャッシュのプラグインといえば、とに...

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

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

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

フォローする

スポンサーリンク