cssは簡単だけど、効かないということがよくあるトラブルです…。chromeなどブラウザ別やスマホなどcssが効かない原因を解決方法を網羅しました。
とりあえず、なんか問題がでたら加筆してブラッシュアップしていきます。
目次
- 1 Chrome(クローム)やSafariなど一部のブラウザでcss(スタイルシート)が効かない原因
- 2 キャッシュが原因でcssが反映されない
- 2.1 ブラウザのキャッシュをクリアする前に、WP Fastest Cacheなどキャッシュ系のプラグインをクリアする方が先!?
- 2.2 chromeのキャッシュの削除方法
- 2.3 chromeで特定のサイトのキャッシュを削除する方法
- 2.4 chromeのキャッシュの削除方法(Androidアプリ)
- 2.5 Safariのキャッシュの削除方法
- 2.6 Safariのキャッシュの削除方法(iPhone)
- 2.7 firefoxのキャッシュの削除方法(PC/MAC)
- 2.8 firefoxのキャッシュの削除方法(Androidアプリ)
- 2.9 firefoxのキャッシュの削除方法(iPhoneアプリ)
- 2.10 WP Fastest Cacheのcssのチェックは危険!?(追記)
- 3 chrome developer toolsと構文チェックツール
- 4 iPhone(ios)やAndroidなどスマホのみcssが反映されない
- 5 古い端末は注意!safari(ios)、firefox、chromeのバージョンとCSSの対応バージョンが合致していない
- 6 CSSの詳細度をあげる
- 7 CSSが効かない事例集
- 8 css程度でもう悩みたくない人におすすめサイト!
Chrome(クローム)やSafariなど一部のブラウザでcss(スタイルシート)が効かない原因
まず問題を切り分けましょう。
- FirefoxとChromeとSafariのいずれかに効かないのか。まず最初に試すのは、キャッシュのクリアです。
- 次に疑うのは構文エラー。構文チェックツールやchrome developer toolsを使った方がいいかもしれません。ソースコードをみると効かないのは警告マークがでて取り消されています。
- その次が優先度。かいてある順番。１番はソースコードの確認です。
- IPhoneだけ効かない場合、デバッグ環境を整えることをおすすめします。ソースコードが確認できるようになります。詳しくはスマホの項目に記載しました。
- そしてブラウザの互換性の問題。古い端末を使っているのに新しいCSSの命令を使っている場合も効かない場合もあります。今使っているブラウザのバージョンとMDNなどでそのバージョンを対応しているか確認してください。
それでは詳しく個別の事例を書いていきます。ブロガーなのでWordPressを使っています。ただ、アプリ開発者でもあるので両方の事例があります。
キャッシュが原因で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リクエスト数を減らす
ファイル結合って意外と弊害もありますよね。。キャッシュ系のプラグインについては詳しくはこちらをみてください。
chrome developer toolsと構文チェックツール
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構文チェックツールで確認しましょう、ツールを利用すると簡単に原因がわかりますよ。エラーがあって効いていない場合もありますし、
エラーがあることはそもそもよくないので、ついでになおしてしまいましょう。
iPhone(ios)やAndroidなどスマホのみcssが反映されない
WordPress版
スマホのブラウザのキャッシュをクリアしても改善されない場合は、Wordpressのキャッシュ系のプラグインが悪さをしていることがあります。以前、WP Fastest Cacheをクリアしたらなおったことがあります。
キャッシュ系のプラグインはこちらにまとめてあります。
もしくは@media screenを切り分けているのをうっかりと忘れているとかですかね。。
それでもダメならChromeデベロッパーツールでCSSのデバッグをします。
アプリ(実機環境のみ反映されない)
実はブロガーだけではなくアプリ開発者でもあります。ローカル環境ではCSSが効いているのに、ビルドして実機で確認すると、PhoneはCSSが効かないというのはよくあることです。デバッグ環境を整えましょう。
デバッグ環境を整えると原因特定が超楽になります！
- iPhone側：設定 > Safari > 詳細 > Webインスペクタ にチェック
- PC側：Safari > 環境設定 > 詳細 > メニューバーに開発メニューを表示 にチェック
- iPhone側：確認したいサイトをSafariで開きます。
- PCの操作：開発 > iPhoneの名前 > 開いたサイト名
- 表示されない場合、iPhoneとMacがちゃんと繋がっていない場合があります
- はじめての場合、このコンピュータを信頼しますか？とでるはず。
- [要素]のタブを開いて該当のCSSを検索して探します。
古いIPhoneを使っていると次の可能性があります。
古い端末は注意!safari(ios)、firefox、chromeのバージョンとCSSの対応バージョンが合致していない
ブラウザ固有のcssサポート問題もあります。古めの実機で確認して、比較的新しいCSSの命令を使っている場合、CSSが効きません。
Safariのバージョンはこちらが参考になります。
その機種でSafariのバージョンを確認してMDNかどっかでCSSの対応バージョンを確認します。
非対応であれば当然効きません。
CSSのclampという関数で効かず、次の記事に書いてあるような方法で解決したこともあります。
…昔、firefoxでbeforeが効かないなんてこともありました。
CSSの詳細度をあげる
!important を使用する方法もありますが、あまり好まれません。この方法で解決する場合、詳細度をあげます。このパターンの場合、デバッグすると打消し線で消されていますね。
pre::before詳細度の計算はややこしいですが、親要素のセレクタを追加すると詳細度があがると覚えておくと楽です。
.contents pre::beforeCSSが効かない事例集
覚書がてら、ちょっと実体験でCSSが効かず困ったことを書いてみます。
全ブラウザでcssが読み込まない。よくある凡ミスとは!?
WordPressの場合、よくあるのが途中でcssがコケていることですね。
括弧のつけ忘れやら、;がなかったり、いわゆる凡ミスです。
最後に追加するのではなく最初に追加すると効く場合があります。その場合、以前追加したcssのコードがどこかおかしくそれ以降効いていないですね。構文チェックツールを使いましょう。
background-clip:text;を擬似要素から子要素に変えたらCSSが効かない
background-clip:text;を擬似要素から子要素に変えたらCSSが効かなくなりました。何やら弾かれているようですが、謎でした。簡単なことはテストしましたが、それ以上の調査が面倒だったので、background-clip:text;を使わない方向で回避しました。
こんな情報はありました。
css程度でもう悩みたくない人におすすめサイト!
無料のオンラインプログラミング体験や有料コースを検討したらどうでしょうか?
ユーデミーは書籍より安い価格でプログラミングが動画学習できます。
便利なプログラムの質問掲示板はこちらです。
コメント