HTML & CSS

最終更新日:
公開日:

レシピ

設定

特定の時間が経過したら自動的にページ遷移(リダイレクト)する

meta要素を使い、一定時間が経過したら自動的にリダイレクトする方法について解説します。

この記事のポイント

  • ページに強制リダイレクトを設定する方法が分かる
  • meta要素を使ったリダイレクトの使いどころが分かる

meta要素を使ってページをリダイレクト

ページのURLが変更/削除になったり、外部サイトへの自動遷移を設定したいとき、meta要素を使ってリダイレクトの設定を行うことができます。

コード例

<meta http-equiv="refresh" content=" 5; url=./index2.html">

content属性には「リダイレクトするまでの秒数」と「遷移先のURL」の2つを、「; (半角セミコロン)」で区切って指定します。
上記のコードでは、ページが表示されてから5秒後に「./index2.html」へ遷移するよう指定しています。

ページが読み込まれたらすぐにリダイレクトをかけたい場合は、「0」を指定します。

コード例

<meta http-equiv="refresh" content=" 0; url=https://gray-code.com/test/index3.html">

遷移先のURLは絶対パス/相対パスのどちらも指定可能で、外部サイトの場合は「https://〜」と通常のURLの記載もできます。
ただし別タブや別ウインドウで開くことはできません。

リダイレクト方法の種類と使いどころ

ページをリダイレクトする方法はいくつかあり、今回の方法はそのうちの1つに過ぎません。

  • meta要素でリダイレクト(今回の方法)
  • htaccessでリダイレクト
  • プログラミング言語によるリダイレクト

今回のmeta要素を使った方法は、主にサイトのトラブルがあった時などの応急措置的な形であったり、外部サイト(別ドメイン)へ移動することを通知するページの表示で使用されます。

外部サイトへリダイレクトするページの表示例
外部サイトへリダイレクトするページの表示例

2つ目のhtaccessを使う方法は手軽でエラーコード(301404など)も指定することができるため、サイト(またはページ)の引っ越しをした際やメンテナンス時によく使われています。
また、ページが読み込まれるよりも前の段階(サーバー上)でリダイレクトを実行するか判断するため、無駄な読み込みが起こらないというメリットがあります。

3つ目のプログラミング言語によるリダイレクトは動的に表示するページを変更するときに使われます。
こちらの方法もサーバーサイドの言語(PHP、Python、Rubyなど)であればサーバー上でリダイレクトを実行するか判断を行います。

使いどころとしてはシステムの中で、例えば会員サイトなどのログインページでログイン情報を入力した後に、ログインに成功した場合/失敗した場合で表示するページを切り分けるときに使われます。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。