cssは簡単だけど、効かないということがよくあるトラブルです…。chromeなどブラウザ別やスマホなどcssが効かない原因を解決方法を網羅しました。
とりえあえず、なんか問題がでたら加筆してブラッシュアップしていきます。
目次
- 1 Chrome(クローム)やSafariなど一部のブラウザでcss(スタイルシート)が効かない原因
- 2 キャッシュが原因でcssが効かない
- 3 WP Fastest Cacheのcssのチェックは危険!?(追記)
- 4 CSS構文チェックツールでエラーを洗い出す
- 5 chrome developer toolsでcssの状況を把握
- 6 wordpressに直入力ではなく、codepenでhtmlとcssを入力して検証
- 7 全ブラウザでcssが読み込まない。よくある凡ミスとは!?
- 8 iPhoneやAndroidなどスマホのみcssが効かない
- 9 ブラウザ固有の仕様を確認する
- 10 CSSが効かない事例集
- 11 css程度でもう悩みたくない人におすすめサイト!
Chrome(クローム)やSafariなど一部のブラウザでcss(スタイルシート)が効かない原因
chromeでcss(スタイルシート)が効かない・反映されないとき、原因はキャッシュかもしれません。今回の場合、firefoxだけ効いていました。
その他の原因は、構文チェックツールとchrome developer toolsを使った方がいいかもしれません。キャッシュ系じゃないと確信している人はキャッシュのところは読み飛ばしてください。
キャッシュが原因でcssが効かない
キャッシュ系はちゃんとコードはかけているのにキャッシュの問題だけで時間を使ってしまうのは大変無駄です。はやめにクリアしたいですね。
ブラウザのキャッシュをクリアする前に、WP Fastest Cacheなどキャッシュ系のプラグインをクリアする方が先!?
キャッシュ系のプラグインを使っている場合、注意事項があります。
キャッシュ系のプラグインを使っていると、ブラウザのキャッシュをクリアしてもなおらないことがあります。
chromeのキャッシュの削除方法
右上の設定アイコン > その他のツール > 閲覧履歴の削除
期間は「すべて」に設定します。
「閲覧履歴」「ダウンロード履歴」「Cookieなどのサイトデータやプラグインデータ」「キャッシュされた画像とファイル」と4項目にチェックボックスが入っていますが、「キャッシュされた画像とファイル」だけクリアすればいける気がいます。「閲覧履歴」は消したくなかったので、個人的に削除しませんでした。
chromeで特定のサイトのキャッシュを削除する方法
特定のサイトのみ削除したい場合は Google Developer Toolsを使います。
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 ファイルを結合して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程度でもう悩みたくない人におすすめサイト!
無料のオンラインプログラミング体験や有料コースを検討したらどうでしょうか?
ユーデミーは書籍より安い価格でプログラミングが動画学習できます。
便利なプログラムの質問掲示板はこちらです。
コメント