Google ChromeやSafariでcssが効かない・反映されない

シェアする

program003

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

ChromeやSafariでcss(スタイルシート)が効かない原因

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

その他の原因はchrome developer toolsを使った方がいいかもしれません。chrome developer toolsの項目まで読み飛ばしてください。

スポンサーリンク

電子書籍のおすすめ比較

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

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

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

スポンサーリンク

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

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

その他の原因はchrome developer toolsでまずはcssが効いているかを確認

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

右クリック > 検証

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

wordpressに直入力ではなく、codepenも活用する

少し難しいものを作成する場合、最近、codepenを利用しています。ブラウザに依存しないため助かります。
使い方はNewPenをクリックしてhtmlとcssを入れれば0Kだけです。こちらで動作確認が取れていればコードの問題ではなく、
Wordpressのプラグインやテーマやブラウザの問題であることがわかります。

A front end web development playground.

無料で登録なしでも使えます。大変便利なサービスですね。

スポンサーリンク

シェアする

フォローする

スポンサーリンク