CSSを変更したのに変更が反映されない

サイトの作成やカスタマイズをしていて、CSSを変更することはよくあります。しかし、ブラウザーで見ても、表示が変わらず、変更が反映されていないことがあります。と言うか、最近まるで変更が反映されなくなったのに気がつきました。

これはどうやらブラウザーの仕様が変わったのが原因のようです。以前だと、ページをリロードすると、CSSファイルも読みに行っていたのですが、最近はCSSファイル(スタイルシート)は読み込まないようです。つまり、最初に読み込んだCSSファイルの中身をキャッシュして保持しているようなのです。

困ったものですね。CSSを変更する度にキャッシュをクリアしなくてはいけません。これでは作業の能率が悪いです。

そこで、これを何とかする方法です。

毎回CSSを読み込むブラウザーを使う

いろいろ試してみましたが、Prestoエンジン版のOperaなら、ページをリロードする度にそのページのCSSを全て読み込んでくれることがわかりました。とりあえず、これを使うことです。

アドオンを使う

やはりみなさんお困りのようで、ちゃんとアドオンがありました。いくつかありますが、「CSS Reloader」と言うのがユーザー数が多く、良さそうです。ショートカットキーを登録できるので、それでリロードすればいいです。FirefoxとChromeに対応しています。

他に困るのは、もし仕事でウェブ制作をしていて、CSSを変更する場合です。こちらで変更しても、お客さんの方で確認できないと言うケースにぶち当たります。

その場合は、CSSのファイル名を変えると解決するようです。と言っても、すっかり変えるのではなく、タグのところで、CSSファイルのURLを書くところがあるので、そこのところだけ、「?」を追加して、その後に適当な文字列を入れます。たとえば、「css/style.css」となっていたら、これを「css/style.css?123」などにします。サーバー上のCSSファイルのファイル名は、「style.css」のままです。

これでお客さんの方でもそのままの状態で確認できます。

まあ、私は趣味以外でサイトを作ることはないので、私には関係のない話ですけどね。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする