HTMLでキャッシュを無効にする方法を解説!

HTMLでキャッシュうを無効にする方法を解説していきます。metaタグに特定の記述を追加することでキャッシュを無効化することが出来ます。やり方を解説します。

コンテンツ [表示]

  1. 1HTMLでキャッシュを無効にしたい
  2. 2HTMLでキャッシュを無効にする方法
  3. 2.1キャッシュを無効化する方法
  4. 2.2キャッシュを有効化する方法
  5. 3HTTPのレスポンスヘッダのキャッシュにも注意しよう

HTMLでキャッシュを無効にしたい

HTMLのキャッシュとは一度読み込んだWEBページ(htmlファイル)をPCやスマホの端末内部に保存し、同じWEBページのリクエストの2回目移行は、新規のリクエストはせず、端末内部のキャッシュからWEBページを表示する仕組みです。

キャッシュを上手く使うことで、ユーザー側からするとリクエストの手間がなくなりWEBページを高速に表示できるメリットがあり、サービス提供側からすると新規のリクエストによるサーバーへの負荷が減るメリットがあります。

一方でキャッシュにより、WEBページを更新してもユーザー側で古いページが表示され続けるというデメリット面もあり、時にキャッシュを無効にしたいという場合もあります。

今回はHTMLのキャッシュを無効にする方法について解説します。

HTMLでキャッシュを無効にする方法

WEBページのキャッシュの制御はHTTPのレスポンスヘッダで制御する方法もありますが、ここではHTMLのソースコード内で制御する方法をご紹介します。

ただし今回解説するやり方はHTML5以前のやり方で、HTML5の場合はHTTPのレスポンスヘッダでキャッシュ管理をしましょう。

キャッシュを無効化する方法

HTMLでキャッシュを無効にする、つまりキャッシュさせないようにするには下記のタグをheadタグ内部に記述します。

キャッシュを無効にする

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

下記はキャッシュを無効化したHTMLのサンプルコードです。

キャッシュを有効化する方法

逆にキャッシュを有効化する方法を見ていきましょう。下記のように記述することでキャッシュの有効期限を設定でき、有効期限内にはキャッシュを使うように指定することが出来ます。

キャッシュを有効化する例

<meta http-equiv="Expires" content="Fri, 1 Jan 2021 00:00:00 GMT">

HTTPのレスポンスヘッダのキャッシュにも注意しよう

今回HTMLファイル内のキャッシュの無効化について解説しましたが、キャッシュはHTTPのレスポンスヘッダで制御している場合もあり、その場合はHTMLファイル内のキャッシュの記述は意味がなくなる可能性があります。

HTTPのレスポンスヘッダでキャッシュを制御するのか、HTMLファイル内の記述で制御するのかしっかりと管理してキャッシュを制御していきましょう。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次