CSSのキャッシュへの対処方法【現役エンジニアが解説】

PROGRAM

今回は、CSSのキャッシュへの対処方法について、3つのパターンに分け、簡単に解説していきます。

更新されない場合はキャッシュ削除

CSSを変更したにも関わらず、更新されない場合があります。

これは、古いCSSがブラウザにキャッシュされているために発生します。

この場合は、ブラウザからキャッシュを削除することで新しいCSSが読み込まれます。

CSSを外部ファイルにしないことで回避

CSSをHTML内に書くことによってキャッシュ問題は回避可能です。

ただし、HTML内でキャッシュを保持しないmetaタグを書く必要があります。

<head>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="expires" content="0">
    <style>
        /* ここにスタイルを全て書く */
    </style>
</head>

上記のコードでは、HTML内でキャッシュ不保持の宣言をし、HTML内にCSSを書いています。

CSSを外部ファイルにする場合は日時等を付ける

CSSファイルのURLの末尾に日時等を付けると毎回新しく読み込まれます。

<link type="text/css" rel="stylesheet" href="hoge.css?20210113100000">

毎回日時を変えるためには、PHP等で動的に日時を出力するようにすると良いでしょう。

<link type="text/css" rel="stylesheet" href="hoge.css?<?php echo date(YmdHis); ?>">

上記のコードでは、CSSの外部ファイルのURLの末尾にPHPで年月日時分秒のパラメータを付けています。