CSSを調整したのにホームページの見た目が以前のまま変わってなかった、ということを経験したことはありませんか？
自分のパソコンの画面では調整したCSSが反映しているのに、他の人がホームページを見たら以前のまま変わってない……ということが起きる理由があります。
そこで今回は、CSSが反映しない理由と、解決するための方法について解説します。
目次
CSSが反映しないのはキャッシュされるのが原因
CSSを調整したのに、ホームページの見た目が以前のまま変わらない理由は、ダウンロードされたデータがキャッシュとして保存されることに原因があります。
キャッシュはホームページで使われているHTMLやCSSなどのデータが、パソコンやスマートフォンに一時的に保存されたものです。
キャッシュがあるとブラウザはキャッシュされたデータを優先して使います。キャッシュを使うことでダウンロードするデータ量が減り、ページを早く表示できるからです。
このようにメリットがあるキャッシュですが、キャッシュがあるためにホームページの一部を調整しても、見た目が以前のまま変わらないことがあります。
確実にデータをダウンロードさせてCSSを強制的に適用させるにはどうすればよいのでしょう。
CSSを強制的に適用させる3つの方法
CSSを強制的に適用させるには3つの方法があります。
- ユーザー操作で強制的にCSSをリロードさせる
- CSSファイルの名前を変える
- CSSファイルの後ろにURLパラメータをつける
それぞれ特徴があるので、詳しく説明します。
ユーザー操作で強制的にCSSをリロードさせる
ユーザー操作でCSSをリロードさせるとCSSを強制的に適用させることができます。「スーパーリロード」などと呼ばれるこの方法は、キャッシュを無視して全てのデータをダウンロードします。
操作方法はOSやブラウザによって異なります。お使いのOSとブラウザの対応表を見て、操作方法を確認してください。
Windowsのスーパーリロード操作
| ブラウザ | 操作方法 |
|---|---|
| Internet Explorer | Ctrl + F5 |
| Edge | Ctrl + F5 |
| Chrome | Shift + F5 |
| Firefox | Ctrl + F5 |
Macのスーパーリロード操作
| ブラウザ | 操作方法 |
|---|---|
| Safari | ⇧ を押しながら更新ボタンをクリック |
| Chrome | ⌘ + ⇧ + R |
| Firefox | ⌘ + ⇧ + R |
スーパーリロードはページが更新されたことが分かっていれば有効な方法ですが、人の手による操作が必要なうえ、ページが更新されたことが分からないとリロードされないデメリットがあります。
CSSファイルの名前を変える
スーパーリロードを使わず、CSSファイル名を変えることでキャッシュを使わないようにする方法もあります。
この方法はキャッシュを使わなくなるかわりに、CSSを調整するたびにファイル名を変更することになるため、非常に手間がかかります。
さらに、CSSファイルを使っている全てのHTMLファイルの記述も変更する必要があります。このような手作業のために変更ミスが起こることを考えると、現実的な方法ではありません。
CSSファイルの後ろにURLパラメータをつける
CSSファイルの名前を変えずにキャッシュを使わないようにする方法もあります。それがファイル名の後ろにURLパラメータをつける方法です。
サーバー側で動くプログラムに情報を送るために、URLの末尾に付け加える文字列です。
一般的に「?」と、その直後に「パラメータ名=パラメータ値」のような書式の文字列を付け加えます。
ファイル名の後ろにURLパラメータを付けて、ブラウザに前回と違うデータを読もうとしていると認識させることで、キャッシュを使わずにデータがダウンロードされます。
URLパラメータはどのような文字列でも構いませんが、一つだけ注意することがあります。それはURLパラメータの文字列もキャッシュされるという点です。
URLパラメータが前回キャッシュされた時と変わっていないと、キャッシュが有効となってしまいます。キャッシュを使わないようにするには、ページを読み込むたびに前回と違うURLパラメータを用意する必要があります。
URLパラメータをつけて確実にCSSを強制リロードさせる方法
CSSファイル名の後ろにURLパラメータをつけるとキャッシュを使わず、データをダウンロードすることはわかりました。ではどのようなパラメータをつけるのが良いのでしょう。
ページにアクセスした日時を使う方法もありますが、ファイルの更新時刻を取得するPHPのfilemtime関数を使えば、キャッシュも利用しながらCSSファイルが更新されたらダウンロードさせることができます。
リンクタグのサンプルを見てみましょう。
|
1 |
<link rel="stylesheet" href="/css/style.css?<?php echo filemtime($_SERVER['DOCUMENT_ROOT'].'/css/style.css'); ?>"> |
普通のリンクタグと違うところはhref属性の書き方です。CSSファイル名の後に?をつけ、そのあとのPHPでCSSファイルの更新時刻を取得してパラメータ値として付与します。
環境によって違いがでるのは/css/style.cssのところになると思います。ここは環境に合わせて変更することになりますが、サンプルを参考にリンクタグを変更すると、CSSファイルの更新時刻がURLパラメータとして使われます。
リンクタグを変更したページをロードすると、href属性が次のような記述に変わります。
|
1 |
<link rel="stylesheet" href="/css/style.css?1604900293"> |
CSSファイル名の後ろにURLパラメータが付与されていることがわかると思います。
URLパラメータの文字列はCSSファイルが更新されるまで、前回と同じ文字列が付与されます。この場合はキャッシュが利用されるためページの表示が速くなります。
CSSファイルが更新されるとURLパラメータの文字列が変わるので、キャッシュを利用せずにデータがダウンロードされ、調整されたCSSが適用されるのです。
通常はHTMLファイルにPHPを組み込んでも動作しないようになっています。
PHPを組み込んで動作させる方法は環境によってそれぞれ異なります。レンタルサーバーのヘルプ情報に設定手順を説明していることが多いのですが、.htaccess ファイルに特定の記述を加えることが多いようです。
『html php 埋め込み .htaccess』などのキーワードで検索すると情報が見つかることが多いので、ご利用の環境にあった方法でPHPを組み込んでください。
パソコンやスマートフォンにキャッシュされるのはCSSファイルに限りません。画像ファイルも同じようにキャッシュされます。
もし、画像のファイル名を変えずにデータだけを変えた場合、キャッシュにある古い画像が表示されますので、CSSファイルと同じやり方でURLパラメータを与えてみるとよいでしょう。
まとめ
いかがでしたか？ 今回はURLパラメータを使った、ちょっとした工夫でCSSを強制的にリロードさせる方法について解説しました。
HTMLファイルにPHPを組み込んで動作させるところが少々難しいかもしれません。ですが、PHPが動作すれば、あとはそれほど難しい仕組みではありません。
この方法を使うことで、CSSが反映しない悩みから解放されれば幸いです。
