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を使います。

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

chromeのキャッシュの削除方法(Androidアプリ)

メニューアイコン > 履歴 > 閲覧データを削除

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

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

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

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

Safariのキャッシュの削除方法(iPhone)

ブラウザではなく設定から。

設定 > Safari > 詳細(その上にある[履歴とWebサイトデータの消去]は全部消えてしまうから注意) > Webサイトデータ > 編集 > すべてのサイトを表示 > ドメイン名を選んで消去

*サイト名検索もできるけど、そこからは消せない謎仕様。。古いiPhoneなので、新しいものでは改善されている可能性があります。

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

firefoxのキャッシュの削除方法(PC/MAC)

Firefoxはわかりやすいです。全消去は以下。

右上メニュー > 設定 > プライバシーとセキュリティ > Cookieとサイトデータの[データを消去] > 消去

ドメインごとに消去は以下。

右上メニュー > 設定 > プライバシーとセキュリティ > Cookieとサイトデータの[データを管理] > 検索に[ドメイン名を入力] > 選択したサイトデータを削除

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

firefoxのキャッシュの削除方法(Androidアプリ)

メニューアイコン > 設定 > プライベートデータを消去

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

firefoxのキャッシュの削除方法(iPhoneアプリ)

メニューアイコン > 環境設定 > データ管理 > プライベートデータを消去

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

スポンサーリンク

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

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

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

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

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

スポンサーリンク

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が読み込まない。よくある凡ミスとは!?

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

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

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

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

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

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

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

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

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

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

CSSが効かない事例集

覚書がてら、ちょっと実体験でCSSが効かず困ったことを書いてみます。

background-clip:text;を擬似要素から子要素に変えたらCSSが効かない

background-clip:text;を擬似要素から子要素に変えたらCSSが効かなくなりました。何やら弾かれているようですが、謎でした。簡単なことはテストしましたが、それ以上の調査が面倒だったので、background-clip:text;を使わない方向で回避しました。

こんな情報はありました。

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

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

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

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

コメント

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