何故かCSSが効かないサイトがある場合の解決方法

  • 投稿 : 2017-03-01

こんな表示でおかしいなぁと思いつつ、半年ぐらい悩んでました。キャッシュではないし・・・。実はこのサイト以外でも2,3この個人ブログでこんな感じでスタイルシートは反映できてないサイトがありました。謎でした。

①外部CSSファイル自体がそもそも読み込めていない

まずは確実にcssファイルを読み込めているかを確認しましょう。これは「検証」つかうまでもないですが
簡単な確認方法としては、
①chromeなどで右クリック→「ページのソースを表示」をクリック
②ソースをブラウザ上で表示し、外部cssを読み込んでいる箇所hrefのリンクをクリック
cssが効かない場合のよくある、ありがちなミスと解決方法 | テクブロ

で、今日ふと原因探しをしようと検索してヒットした上記ページの1つめを試すと解決しました。

右クリック->「ページのソース表示」でHTMLソースを表示させます。CTRL+Fキーで検索窓を出して「stylesheet」で検索するとそれらしい部分がヒットします。


外部のスタイルシートを読みこんでいるのはこの部分です。どれでもいいので、1つめをクリックします。正常動作の場合は、common.cssの中身が見えるはずです。


結果がこれ。ブロックされて読めてませんでした。
ウイルス対策ソフトのavastのサイトブロックという機能で、「cloudfront.net」を登録してたのが原因でした。
「cloudfront.net」であやしいサイトがあったので、登録したんだと思います。

cloudfront.netって何者なのか?!

Q: Amazon CloudFront とは何ですか?
Amazon CloudFront は、企業やウェブアプリケーション開発者に、少ない待ち時間と高いデータ転送速度でコンテンツを配信できる、簡単で費用対効果の高い方法を提供するウェブサービスです。
よくある質問 - Amazon CloudFront | AWS

Amazonが従量課金制のCDNサービス「Amazon CloudFront」を開始・・・したので試してみた - 元RX-7乗りの適当な日々

上記2つから、Amazonがやっている「Amazon CloudFront」というCDNサービスですね。
CDNサービスというのは、キャッシュサービスみたいなものです。

インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを、オリジナルのWebサーバーに代わって配信する仕組みを意味する。この仕組みを利用した企業向けのサービスが、CDNサービスだ。
CDNサービス | IT用語辞典 | 大塚商会

つまり、cloudfront.net自体が怪しいのでなくて、このサービスを利用している怪しい業者がいたってことなんでしょうね。

スポンサーリンク