Webデザイン
CSS
フロントエンド
最新の CSS を常に読み込む
CSS を書き換えてアップロードしてもビジター側にキャッシュ再読み込み（スーパーリロード）してもらわないと反映されない、という状況は表示崩れの原因になるので、ビジターが意識することなくキャッシュを最新にする方法としてキャッシュバスティングというものを使います。
キャッシュバスティングとは
ファイル名の末尾に日付やバージョン番号を加える手法です。
<!-- 日付や時間を加える例 -->
<link rel="stylesheet" href="css/style.css?20190829233517">
<link rel="stylesheet" href="css/style.css?date=20190829">
<!-- バージョン番号を加える例 -->
<link rel="stylesheet" href="css/style.css?v1.0.2">
<link rel="stylesheet" href="css/style.css?version=20190829">ファイル名の末尾に「 ? 」を付加し、その後ろに任意の文字列を続けます。
書式にルールはなく、あくまでも現在のファイルを区別するための符号として扱われますので、この文字列を書き換えるまではキャッシュの更新が行われなくなります。
ファイルを更新した時に、この末尾の日付や番号を別の値にすると、ビジター側のブラウザは新しいファイルをキャッシュします。
キャッシュバスティングの対象は CSS や JS ファイルなど更新頻度や画面レイアウト、挙動に与える影響の大きなものです。
定数を使った基本の書き方
PHP が使える場合、バージョン番号を定数化すればキャッシュバスティングしたいファイルの末尾で echo するだけです。
<?php
define("CACHE_BUSTING", "v20190829")
?>
<link rel="stylesheet" href="css/style.css?<?php echo CACHE_BUSTING; ?>">
ファイルを更新したらバージョン番号を変えるだけで対象のファイルが全て再読み込みされます。
自動化する場合
PHP で書く場合はファイルの更新日時を UNIX 時間で取得することができるので、その値をファイル名の末尾に付加すると更新忘れを防げます。
filetime関数を使う書き方
<link rel="stylesheet" href="css/style.css?date=<?php echo filemtime( 'css/style.css' ); ?>">
// 実行結果
<link rel="stylesheet" href="css/style.css?date=1567048974">この書き方はバージョン番号を定数化せず、ファイル更新日時をベースとするので、PHP の書き直しが不要になります。
対象のファイルが上書き保存された時点で再キャッシュの対象となります。
unixtime を西暦にするとき
date 関数の中に入れると好きな形式にできます。
<link rel="stylesheet" href="css/style.css?date=<?php echo date('YmdHis', filemtime('css/style.css')); ?>">
// 実行結果
<link rel="stylesheet" href="css/style.css?date=20190829122254">WordPress テーマで使う場合
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css?<?php echo filemtime( get_template_directory() . '/css/style.css'); ?>">