【HTML/CSS】ファイルの読み込みとCSSキャッシュを削除する方法

【HTML/CSS】ファイルの読み込みとCSSキャッシュを削除する方法

投稿者の画像

y.kobayashi

2025.01.28

この記事をシェアする

このデザインを共有する

Close

ブラウザのキャッシュは、サイトの試行錯誤やデザイン変更の際に問題となることがあります。この記事では、CSSファイルのキャッシュを無効化し、最新のスタイルを確実に送信するための方法を紹介します。

HTMLでCSSを読み込む方法

CSSを使用してウェブサイトのデザインを適用するためには、HTMLにCSSファイルを読み込む必要があります。以下のコードは、基本的なCSSファイルの読み込み方法です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSの読み込み例</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>CSSの読み込み例</h1>
    <p>このページは外部CSSを使用しています。</p>
  </body>
</html>

上記の例では、<link>タグを使用して外部CSSファイル(style.css)を読み込んでいます。

継続して更新すると溜まっていくCSSキャッシュ

そもそもキャッシュとは?

キャッシュとは、一度アクセスしたウェブサイトのデータ(HTML、CSS、画像など)をブラウザがローカルに保存する仕組みです。
これにより、次回以降のアクセス時にデータの再ダウンロードを避け、表示速度を向上させることができます。

CSSキャッシュの問題とは?

デメリットとして、サイトのデザインや内容を変更してもキャッシュが古いデータを保持しているため、ユーザーに最新の状態が反映されない場合があります。これは、ユーザー体験を悪化し、SEOランキングにも影響を与えます。これを回避するために、CSSのキャッシュを無効化する手段が必要です。

ブラウザでキャッシュを削除するには

開発やテスト時には、ブラウザのキャッシュを手動で削除することも有効です。以下は、主要なブラウザでのキャッシュ削除手順です。

Google Chrome

  1. 右上のメニュー(縦に並んだ3つの点)をクリック。
  2. 「その他のツール」→「閲覧履歴を消去」を選択。
  3. 「キャッシュされた画像とファイル」にチェックを入れ、「データを消去」をクリック。

Firefox

  1. メニューボタン(三本線)をクリック。
  2. 「設定」→「プライバシーとセキュリティ」を選択。
  3. 「キャッシュされたウェブコンテンツ」の「今すぐ消去」をクリック。

Microsoft Edge

  1. 右上のメニュー(3つの点)をクリック。
  2. 「設定」→「プライバシー、検索、サービス」を選択。
  3. 「閲覧データをクリア」セクションで「今すぐクリア」をクリック。

Safari(Mac)

  1. メニューバーから「Safari」→「環境設定」を選択。
  2. 「詳細」タブで「メニューバーに開発メニューを表示」にチェックを入れる。
  3. メニューバーの「開発」→「キャッシュを空にする」を選択。

HTMLの指定でCSSキャッシュを無効化する方法

1. クエリパラメータにバージョン番号を追加

CSSファイルのURLに、バージョン番号を追加します。
これにより、新しいバージョン番号を設定するたびにキャッシュが無効化されます。

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

2. タイムスタンプを加える方法

PHPなどのサーバーサイド言語を使用して、タイムスタンプを加えます。

<link rel="stylesheet" href="style.css?v=<?php echo time(); ?>">

毎回異なるタイムスタンプが追加されるため、確実にキャッシュが無効化されます

3. 最終更新日を利用

ファイルの最終更新日を表示し、実際に更新された場合のみキャッシュを無効化する方法です。

<link rel="stylesheet" href="style.css?v=<?php echo filemtime('style.css'); ?>">

4. JavaScriptで加読み

JavaScriptを使ってCSSファイルを加読し、キャッシュを無効化する方法です。

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'style.css?v=' + new Date().getTime();
document.head.appendChild(link);

これらの4つの方法の比較

方法利点注意点
1.クエリパラメータ簡単に実装可能更新のたびに手加えが必要
2.タイムスタンプ毎回新しいタイミングで確実に無効化可能レーザーを無駄に利用するので、重たいページには不向き
3.最終更新日最終更新時間のみ変化されるので効率的PHPなどサーバーサイドが必要
4.JavaScript自動化され、動的な場合に有用スクリプトが必要でコードが増える

最後に

ブラウザのCSSキャッシュは、ユーザー体験やSEOに大きな影響を与えます。この記事で紹介した方法を活用し、最適なキャッシュ制御を実現しましょう。

この情報が役に立てば幸いです!