エンジニアブログ

サイトの修正作業でブラウザのキャッシュが邪魔になることはよくある課題です。しかし、クライアントが手動でキャッシュを削除する手間を省きつつ、簡単にサイト修正を確認する方法があります。今回はCSSファイルにパラメータを追加する方法をご紹介します。

キャッシュ問題の発生

サイトを修正したにも関わらず、ブラウザが古いCSSファイルを表示し続ける問題は非常によくあることです。クライアントに手動でキャッシュを削除してもらうのは手間がかかりますよね。

CSSファイルにパラメータを追加

簡単な解決策として、CSSファイルのURLにバージョン番号やタイムスタンプのようなパラメータを追加しましょう。例えば、style.css?v=1.0のようにします。

<link rel="stylesheet" href="css/style.css?v=1.0">

このようにパラメーターを付与することでブラウザでキャッシュを削除することなく、即確認をすることができます。
因みにですがjsやimgにも活用することができます。

<!-- imgの場合 -->
<img src="img/sample.png?1" alt="">

<!-- jsの場合 -->
<script src="js/script.js?2"></script>

パラメータ変更で即時反映

サイトを修正するたびに、CSSファイルのパラメータを変更します。例えば、style.css?v=1.1とすると、ブラウザは新しいファイルとして認識します。
修正の度に、パラメーターの値を変更をしなければ更新されませんのでご注意ください。

手軽に最新デザインを確認

この方法を使えば、クライアントはブラウザの設定に触れず、手軽に最新のデザインを確認できます。修正が頻繁に行われる場合でも、ストレスなくサイトの進捗を確認できます。

この手法を利用することで、クライアントと開発者の双方がスムーズに作業を進められることでしょう。