CSSが反映されない時に、リソースが切れていないか確認する方法

CSSが反映されていなくてページ内のデザインが一部崩れていたことになかなか気づかなかったということはありませんか?

ここでは、どのCSSのリソースが切れているか見つけることができるツールを紹介します。

1.デベロッパーツールでCSSが反映されない時に確認する方法

ここでは一旦Google Chromeのデベロッパーツールを使っていきます。デザインが崩れているページを開き、Windowsなら「F12」キーを押します。(Macなら⌘ + Opt + I)

CSSがうまく反映されていないHTMLセレクタを選択すると、右側に該当のCSSファイルが表示されます。ここに正しいCSSファイルが表示されていない場合、CSSのリソースが切れているということです。headタグ内にあるCSSのリンクが正しいか確認してみてください。

デベロッパーツールでCSSのリソースが切れていないか確認する方法

この方法は目視で気づいた場合有効ですが、そもそもデザインの崩れを見落としている場合は以下の方法をお勧めします。

2.アナトミーでCSSが反映されない時に確認する方法

弊社のアクセス解析ツール「アナトミー」でもCSSのリソースが切れていないか確認できます。「アナトミー」はアクセス指標やユーザー動線など解析に関する情報だけでなく、ページの画面キャプチャやCSSなどのリソース情報も持っています。

1.[ プロパティ ]をクリック
2.[ リソース切れ ]ボタンをクリック
3.リソース切れが起きているページはタイルが赤くなる
アクセス解析ツール「アナトミー」でCSSのリソースが切れていないか確認する方法
4.メニューをクリックし[ ページリソース閲覧 ]をクリック
アクセス解析ツール「アナトミー」でCSSのリソースが切れていないか確認する方法
5.詳細情報ページの[ リソース ]をクリック
6.リソースが切れているCSSファイルにエラーアイコンが表示される
アクセス解析ツール「アナトミー」でCSSのリソースが切れていないか確認する方法

これだけで、どのCSSのリソースが切れているのか確認できます。そしてアナトミーは週次で更新しているので、毎週自動でリソースが切れていないか確認できるようになります。これでなかなかデザイン崩れが起きていることに気付けなかったということはなくなります。

まとめ

リソース切れやリンク切れなどでページが正しく表示されないと、離脱率も上がってしまいます。
ページの品質を上げることもアクセス解析においては重要です。ぜひ一度「アナトミー」をお試しください。

もしも、気になるページがうまく計測されない、などGoogleアナリティクスの設定に関して懸念点があれば、Googleアナリティクスの設定状況が診断できるサービスも含まれていますので、合せてお試しください。

【無料ウェビナー】アクセス解析の基本が分かる!

アクセス解析とは画面の改善をすること

アクセス解析はデータを見ることではなく、データに基づいて画面の改善をしていくことです。

このセミナーでは基本的なアクセスデータの見方から、データに基づいた画面の改善方法を学ぶことができます。

web改善に必要な6つの施策

セミナー詳細はこちら

参加者の声

参加者の声

今までとは違った角度で自社のwebサイトを見られてよかったです。

参加者の声

テンポよく、的確な説明で分かりやすかった。重要ポイントについても強調され、頭に入った。

参加者の声

私のような素人でも問題なく参加できました。

Page Top