プログラミング

スタイルシートを更新したけど反映されないのは何で?

投稿日:2019年6月10日 更新日:

こんにちは、はんぺらです。

スタイルシートを修正して、ブラウザを更新したのにサイトに反映されなくて困ってる人は居ますか?

僕も、ウェブ系の開発を始めたばかりの頃は、同じ問題で悩んだことあります。
何度も何度も保存してるのに、ちゃんと保存されてるはずなのに、反映されない。。。結構イライラしますよね。。。

でも、全然大丈夫です。この記事を読めば、あなたのスタイルシートはすぐに画面に反映されるようになりますよ。最初に手順を書いてるので、手順だけ知りたい方はそれだけ見て試して見て下さい。

更新できない時はスタイルシートの読み込みのURLにパラメータをつけよう

取り敢えず、更新を反映させる手順だけをまずは説明します。

下記のようなスタイルシートの読み込みがあったとします。

<link rel='stylesheet' href='https://eejanaica.com/style.css' type='text/css' />

これのhrefの値に、下記のようにパラメータを付けるだけです。これで、最新版が読み込まれるようになります。

<link rel='stylesheet' href='https://eejanaica.com/style.css?v=2' type='text/css' />

はい、これで終わりです。手順だけ知りたかった人は、これで修正を反映させちゃって下さい!

更新されない理由を知ろう

取り急ぎ更新の反映はできたけど、理由も気になると思います。

では、何故スタイルシートを修正して、ちゃんと保存したのにデザインは更新されなかったのでしょうか?

それは、ブラウザがしているキャッシュというものが影響しています。

ブラウザがしているキャッシュとは?

ブラウザがしているキャッシュというのは、あなたが快適にインターネットを見られるように、ブラウザが勝手に内部でやってくれていることです。

具体的に何をやってくれているのかと言うと、スタイルシート、javascript、画像など、HTML内にリンクとして埋め込んであるファイルを、ブラウザが自分がすぐ取り出せる場所に保存してあげているんです。

では、何故ブラウザはわざわざ、すぐ取り出せる場所に保存するのでしょうか?私達の為に役に立つことなんでしょうか?

実はこのキャッシュをすることで、私達は快適にインターネットを楽しむことができているんです。

ブラウザがすぐ取り出せる場所に保存することで、私達が同じウェブサイトを再訪問した時に高速にそのウェブサイトを表示させることができるんです。

なぜなら、ブラウザがスタイルシート、Javascript、画像ファイルをもう既にキャッシュとして自分で持っているので、わざわざインターネットを通してそれらのファイルを取ってくる必要が無くなるためです。

インターネットでウェブサイトを見る時に、一番時間がかかるのは通信の部分なのです。その通信の回数をなるべく少なくするために、ブラウザがキャッシュしてくれているのです。

なので、私達が快適にインターネットを楽しむ為にキャッシュは必要な技術なのです。

なぜ、URLにパラメータを追記したら更新が反映されたのか?

ブラウザがファイルをキャッシュしていると、HTML内のそのファイルのURLが変わるか、または、キャッシュの保持期限が過ぎない限りは、ブラウザがキャッシュしているファイルは再度インターネットから取得してくれません。

そこで、スタイルシートのURLにパラメータを付与することで、ブラウザに「スタイルシートが更新されましたよ、更新してください」って教えてあげてるんですね。

よって、パラメーターをつけると更新してくれるってことなんです。

ちなみに、パラメータのvとはversionのvです。このパラメータはvじゃなくてもいいんですが、もう既にvで一般化してしまっているので無理して変える必要は無いでしょう。

開発中はスーパーリロードを使用しよう

キャッシュされているファイルの更新方法は分かったと思いますが、ウェブサイト開発中は何度もスタイルシート等は修正すると思います。その都度パラメータの値を更新するのは、正直面倒くさいですよね。

なので、開発中は「スーパーリロード」を活用しましょう。

スーパーリロードとは「フルリロード」「強制再読み込み」とも呼ばれていて、これをやると、ブラウザはキャッシュを無視して強制的にインターネットから最新版を取得してくれます。

下記は、windowsとmacのブラウザ毎のスーパーリロードのショートカット一覧です。

windowsIECtrl + F5
windowsfirefoxCtrl + F5
windowschromeShift + F5
macfirefoxCmd + Shift + R
macchromeCmd + Shift + R
macsafariShift + 更新ボタン

ただ、ブラウザによってはスーパーリロードをやっても、最新版を取得してくれない事もあります。

そんな時は、ブラウザを変えてみるか、もしくは、ブラウザキャッシュ自体の無効化をするという方法もあります。

ですが、ブラウザキャッシュの無効化を行うと、全てのサイトのブラウザキャッシュが無効化されてしまいます。よって、全てのサイトの読み込みスピードが遅くなってしまいます。ですので、ブラウザキャッシュ自体の無効化はあまりおすすめはしません。

その他の方法として、サーバーサイドで強制的にパラメーターに日時を指定することで、毎回更新させるという方法もあります。

自分はあんまり使わないですが、一応紹介しておきますね。
具体的には下記のような感じです。

<link rel="stylesheet" href="style.css?<?php echo date('Ymd-His'); ?>" type="text/css">

phpのdate関数を使用して、毎回パラメータがユニークになるようにしています。

まとめ

いかがですか?これで少しは作業効率は上がるんじゃないでしょうか?

初めてだと、色々と壁にぶつかる事が多いと思いますが、一つ一つ目の前の問題を解決しながら前に進んで行きましょう。

私も皆さんに少しでも何かを共有できるようにネタ探し頑張ります!

-プログラミング

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

僕が個人開発でサービスを作る理由と継続するためにしている事

こんにちは、はんぺらです。 皆さんはプログラミングを学んで何をしたいのでしょうか AIの開発チームに加わりたいのか、ロボットを作りたいのか、ただ、何となくエンジニアとして就職できればよいのか。 僕は今 …

初めて学ぶプログラミング言語は何がよい?

こんにちは、はんぺらです。 2020年からプログラミングが小学生の必修科目になりますね。そう、世の中はプログラミングブームです。このビッグウェーブに乗っかろうと学習を始めようと思った人もいるでしょう。 …

MacにPHPの開発環境を作るなら何が良いの?MAMP?Docker?Vagrant?

こんにちは、はんぺらです。 自分のMacのパソコンに開発環境を作りたんだけど、何を使って作ったら良いんだろう?MAMP?Docker?Vagrant?とかあるけど、何がどう違うんだろう? それぞれの違 …

プログラミング始めるならMac、windowsどちらを買えばいい?

プログラミングを始めたいんだけど、パソコン持ってないから買わないといけないんだけど、Macとwindowsのどっちがいいのかわからない。って疑問にお答えします。 お金に余裕があるならMacbookを買 …

プログラミングの本を1冊読んだらアウトプットしよう

こんにちは、はんぺらです。 日々プログラミングの勉強をしている皆様、アマゾンで評判が良い技術書で勉強していますか?それとも、オンラインで学習されていますか? 勉強していてもホントに自分のスキルになって …

はんぺらのプロフィール

神奈川県在住、30代web系プログラマー

情報系の大学卒業後、工場勤務、引っ越し業者、アパレル販売員等を得て、web系のエンジニアに落ち着く。その後海外で3年ほど働き、帰国後日本でエンジニアを行いつつ、フリーランスになる機会を伺っている。