ホームページでCSSを修正しアップしたけど、表示してみたら変更が反映していなかった事はありませんか？
そんな場合ほとんどが、ブラウザのキャッシュ機能がきいており、修正したCSSを読み込んでくれておりません。今回は強制的に修正したCSSを読み込ませる方法をご紹介します。
CSSを強制的に読み込ませる方法
通常CSSを読み込む場合は以下のようなコードになっていると思います。
<link rel="stylesheet" href="style.css">こちらの「style.css」にGETパラメーターを付けてあげればCSSを強制的に読み込ませることができます。
<link rel="stylesheet" href="style.css?ver=1.0.5"> ただ、CSSを更新したときに、パラメーターの数字を変更してあげる必要があります。
上記ではverの値が「1.0.5」になっておりますので、更新した場合は「1.0.6」等に数値を変更してください。
値を変更することで新しいファイルと判断してキャッシュに持っているCSSではなく、更新されたCSSファイルを読み込んでくれます。
<link rel="stylesheet" href="style.css?ver=1.0.6">今回は「ver」としてバージョンとしてパラメーターにしておりますが、「style.css」の後ろに「?」マークを付け、「名前=値」の形式で記述すればどんな値でもCSSを強制的に読み込ますことができます。
例えばですが、バージョンではなく更新日で管理したい場合であれば日付を付けても大丈夫です。
<link rel="stylesheet" href="style.css?day=20200119">何故強制的に読み込ませるのか？
強制的に読み込ませなくても「リロード」すればいいんじゃない？と思われる方もおられるかもしれませんが、単純に「リロード」しても読み込まない場合もあり、その場合は「スーパーリロード」する必要があります。
「スーパーリロード」は、強制的にすべてのデータを読み込ますことになりますので、HTMLファイルやCSSファイルだけでなく、画像ファイルも読み込ませることになってしまいます。
すべてのデータを読み込むということは、それだけデータ通信量が増えてしまいます。また、ホームページを表示するにも時間がかかってしまいます。
パソコンであれば、データ通信量が増えてもたいしたことないですが、スマートフォンではデータ通信制限があったりしますので、少しでも通信量は少なくした方が閲覧ユーザーの為にもなり、離脱率も下がることになります。
GETパラメーターを付けて、更新毎に値を変えることで、該当のCSSファイルのみを強制的に読み込ませることができますので、「スーパーリロード」の必要がなくなりユーザビリティを上げることができます。
まとめ
CSS更新のときに、HTMLファイルも編集することになりますが、ファイルを定期的に更新することはSEO的にも有効かと思います。
普通に閲覧してくださるユーザーに、ファイルを更新したから 「スーパーリロードして下さい。」 って言うのはおかしなことです。なので、クライアントにも更新したので「スーパーリロードして下さい。」おかしなことですよね。
ちなみに私は恥ずかしながら数年前まで「更新されていないようでしたら、スーパーリロードしてみてください。」って連絡してました、、、、
