【HTML+CSS】外部スタイルシート読み込み用リンクタグ

タイトルが全てです。
HTMLから外部スタイルシートを読み込むときのリンクタグの記法です。

さっさと結論

<link rel="stylesheet" type="text/css" href="style.css?v=123">

この一文の記法を毎回毎回毎回忘れる上に、検索すると大体長々した記事を読まされるので、端的に自分用メモ。
?v=123の部分はクエリパラメータというおまじない。

クエリパラメータについてちょっとだけ

CSSを外部ファイルにすると一個だけ問題があって、実はブラウザって、毎回サーバー上のCSSファイルを見に行ってくれているわけではなく、自分の中にこっそりサイトの見た目データを蓄えてるんですね。で、二回目以降のアクセスの時は一々CSS見に行かないで、自分の中のデータ(キャッシュ)を見て表示しちゃうんですよ。それはそれで表示が速くなるメリットがあるんですが、ただ、折角CSS書き換えたのになかなか変更がブラウザに反映されずにレイアウト崩れが起きてしまったりします。
ところが、外部CSS読み込みタグにクエリパラメータを付けて、「?v=123」の数字部分を適当に書き換えて上げれば、見た人のブラウザが「おっCSS変わってんな?再読込したろ」ってキャッシュを見ずにちゃんとサーバー上のCSSを見てくれます。たぶん。たまに強情なやつがいますが、概ねちゃんと読み込み直してくれます。やらないよりは遙かにマシ。

この記事が気に入ったらサポートをしてみませんか?