【HTML】ページ遷移の基本から応用まで！ボタン・自動遷移・値渡しの方法

Webサイトを作成する上で、現在のページから別のページへと移動する「ページ遷移」は最も基本的な機能の一つです。

基本となるリンク（aタグ）の設定はもちろんですが、実務では、

「ボタンをクリックして移動させたい」
「5秒後に自動的にトップページへ戻したい」
「次の画面へデータを渡したい」

といった様々な要件に対応する必要があります。

この記事では、HTMLとJavaScriptを組み合わせたページ遷移のあらゆるパターンを、コピペで使えるサンプルコードと、それぞれのコードがどのように動いているのかという詳細な解説とともに紹介します。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

基本中の基本！aタグを使ったページ遷移
1. 基本的なリンクの記述方法
2. 新しいタブで開く方法（target=”_blank”）
ボタンをクリックしてページ遷移させる3つの方法
一定時間後に自動でページ遷移させる方法
1. metaタグを使ったリダイレクト（refresh）
2. JavaScriptのsetTimeoutを使った遷移
JavaScriptを活用した高度なページ遷移
1. 通常移動：location.href
2. 履歴に残さない移動：location.replace()
ページ遷移時の「値渡し（データ受け渡し）」テクニック
HTML/CSSのスキルを活かして年収を上げる方法

基本中の基本！aタグを使ったページ遷移

HTMLでページを移動させる最も標準的な方法は、アンカー（Anchor）タグと呼ばれる <a> 要素を使用することです。

SEOの観点からも、クローラーがサイト構造を理解しやすくなるため、特段の理由がない限りはこの方法が推奨されます。

基本的な書き方と、よく使われる属性を確認していきましょう。

基本的なリンクの記述方法

href 属性（エイチレフ属性）に移動先のURLやファイルパスを指定します。

<!-- 同じサイト内の別ページへ移動（相対パス） -->
<a href="about.html">会社概要へ</a>

<!-- 外部サイトへ移動（絶対パス） -->
<a href="https://www.google.com">Googleへ</a>

コード解説

href="about.html"：現在のファイルと同じフォルダにある「about.html」というファイルを探して移動します（相対パス）。
href="https://..."：「http」から始まる完全なURLを指定することで、外部のWebサイトへ移動できます（絶対パス）。
タグで囲まれた「会社概要へ」などのテキストが、画面上でクリック可能なリンクとして表示されます。

新しいタブで開く方法（target=”_blank”）

リンク先のページを現在のタブではなく、新しいタブ（またはウィンドウ）で開きたい場合は、target="_blank" 属性を追加します。
外部サイトへのリンクによく利用されます。

セキュリティ対策として、rel="noopener noreferrer" をセットで記述するのが現在のWeb標準となっています。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    外部サイトを別タブで開く
</a>

コード解説

target="_blank"：リンクをクリックした際、現在のページを残したまま、ブラウザの新しいタブを開いて移動先を表示します。
rel="noopener noreferrer"：セキュリティとパフォーマンスのための記述です。
- noopener: 新しく開いたページから、元のページを操作できないようにします（セキュリティ対策）。
- noreferrer: リンク元の情報を移動先に送らないようにします（プライバシー保護）。

ボタンをクリックしてページ遷移させる3つの方法

デザインの都合上、「リンクテキスト」ではなく「ボタン」を押して画面遷移させたいケースは頻繁にあります。

見た目は同じボタンでも、実装方法はいくつか存在します。

状況に合わせて最適な手段を選べるよう、3つのパターンを紹介しましょう。

1. aタグをCSSでボタン風に見せる（推奨）

最も推奨されるのは、HTML自体は <a> タグを使い、CSSで見た目をボタンにする方法です。

この方法はセマンティック（意味論的）に正しく、検索エンジンもリンクとして認識できるため、SEOに有利に働きます。

<!-- HTML -->
<a href="contact.html" class="btn-link">お問い合わせ</a>

<!-- CSS -->
<style>
.btn-link {
    display: inline-block; /* 幅や高さを指定できるようにする */
    padding: 10px 20px;    /* ボタンの内側の余白（上下10px、左右20px） */
    background-color: #007bff; /* 背景色（青） */
    color: white;          /* 文字色（白） */
    text-decoration: none; /* リンクの下線を消す */
    border-radius: 5px;    /* 角を丸くする */
}
.btn-link:hover {
    background-color: #0056b3; /* ホバー時の背景色（濃い青） */
}
</style>

コード解説

HTML側：通常のリンクと同じ <a> タグを使いますが、class="btn-link" を指定してCSSを適用させます。
display: inline-block;：aタグは本来「インライン要素」で幅や高さを持てませんが、これを指定することでボタンのような箱型として扱えるようになります。
text-decoration: none;：リンク特有の青い下線を削除して、ボタンらしい見た目にします。
:hover：マウスカーソルが乗ったときの色を指定し、クリックできることをユーザーに伝えます。

2. formタグを使ってボタン遷移する

<form> タグの中に <button> を配置する方法です。

本来はデータを送信するための仕組みですが、action 属性にURLを指定することで、ボタンクリックによるページ遷移として利用できます。

JavaScriptを使わずに実装できるのが利点です。

<form action="next_page.html">
    <button type="submit">次へ進む</button>
</form>

コード解説

<form action="...">：本来は入力データを送るためのタグです。action 属性に移動先のURLを指定します。
<button type="submit">：このボタンを押すと「フォームの送信」が実行され、結果として action で指定したページへ画面が切り替わります。
データ送信を伴わない単純な移動で使うのは少し大袈裟ですが、JavaScript無効環境でも動作する堅牢な方法です。

3. JavaScriptのonclickイベントを使う

<button> タグや <input type="button"> に onclick 属性を設定し、JavaScriptを実行して遷移させる方法です。

処理を行ってから遷移したい場合などに有効ですが、リンクとして認識されないためSEO的には弱くなります。

<button onclick="location.href='next_page.html'">
    クリックして移動
</button>

コード解説

onclick="..."：「クリックされたら…」というイベントを指定する属性です。
location.href='...'：JavaScriptの命令です。
- location は現在のページのアドレス情報を管理するオブジェクトです。
- href プロパティに新しいURLを代入することで、ブラウザに「このURLへ移動しろ」と命令します。

一定時間後に自動でページ遷移させる方法

「送信が完了しました。5秒後にトップページへ戻ります」といった画面で見かける、自動的なページ移動の実装について解説します。

HTMLのメタタグを使う方法と、JavaScriptを使う方法の2種類があり、用途によって使い分けます。

metaタグを使ったリダイレクト（refresh）

HTMLの <head> 内に meta タグを記述するだけで実装可能です。

content 属性には「秒数; URL=移動先」の形式で指定します。
JavaScriptが無効な環境でも動作するのが強みです。

<head>
    <!-- 5秒後に index.html へ移動 -->
    <meta http-equiv="refresh" content="5; URL=index.html">
</head>

コード解説

http-equiv="refresh"：ブラウザに対して「ページの再読み込み（リフレッシュ）」を指示します。
content="5; URL=index.html"：
- 最初の数字 5 は「待機する秒数」です。0にすると即座に移動します。
- URL=... で移動先を指定します。これを省略すると、現在のページを再読み込みします。

JavaScriptのsetTimeoutを使った遷移

より柔軟な制御をしたい場合は、JavaScriptの setTimeout 関数を使用します。

<script>
    // 3000ミリ秒（3秒）後に遷移
    setTimeout(function() {
        window.location.href = 'index.html';
    }, 3000);
</script>

コード解説

setTimeout(関数, 時間)：指定した時間が経過した後に、一度だけ関数を実行するタイマー処理です。
3000：待機する時間を「ミリ秒」で指定します。3000ミリ秒は3秒です。
時間が来ると中の関数が実行され、window.location.href によってページ遷移が行われます。

JavaScriptを活用した高度なページ遷移

JavaScriptを使うと、単に移動するだけでなく、履歴の管理や新しいウィンドウでの表示など、細やかな制御が可能になります。

window.location オブジェクトにはいくつかのメソッドやプロパティがあり、それぞれの挙動を理解しておくことが重要です。

通常移動：location.href

最も一般的な遷移方法です。

ブラウザの履歴に元のページが残るため、ユーザーはブラウザの「戻る」ボタンで前のページに戻ることができます。

// プロパティにURLを代入する
window.location.href = 'https://example.com';

コード解説

これはリンク（aタグ）をクリックした時と同じ挙動です。
新しいページが履歴に追加されるため、ユーザー体験として自然な移動になります。

履歴に残さない移動：location.replace()

現在のページを新しいページで「置き換える」メソッドです。

履歴に残らないため、ユーザーが「戻る」ボタンを押してもこのページには戻ってきません。
決済完了画面やログアウト処理など、戻ってほしくない場面で使用します。

// 現在の履歴を上書きして遷移
window.location.replace('https://example.com');

コード解説

replace()：「置換する」という意味です。現在のページの履歴を、新しいURLで上書きしてしまいます。
例えば、「ページA → ページB（ここでreplace実行） → ページC」と進んだ場合、ページCで「戻る」ボタンを押すと、ページBではなくページAに戻ります。

ページ遷移時の「値渡し（データ受け渡し）」テクニック

「検索結果一覧から詳細ページへIDを渡したい」「入力フォームの内容を次の確認画面へ引き継ぎたい」など、画面遷移に伴ってデータを渡したい場面は多々あります。

HTMLとJavaScriptだけで実装できる、代表的な3つのデータ受け渡し方法を紹介します。

1. URLパラメータ（クエリ文字列）を使う

移動先のURLの後ろに ?key=value の形式でデータを付加する方法です。GETリクエストとも呼ばれます。

<!-- 送信側 HTML -->
<a href="detail.html?id=123&category=book">商品詳細へ</a>

?：URLパラメータの開始を表します。
id=123：「id」という名前で「123」という値を送ります。
&：複数のデータを送る場合の区切り文字です。ここでは「category」も送っています。

受け取り側のページ（detail.html）では、JavaScriptを使ってURLから値を取り出します。

// 受け取り側 JavaScript
// URLの?以降（クエリ文字列）を取得して解析オブジェクトを作成
const urlParams = new URLSearchParams(window.location.search);

// パラメータ名を指定して値を取得
const id = urlParams.get('id'); // "123"
const category = urlParams.get('category'); // "book"

console.log(id, category);

window.location.search：URLの「?」以降の部分（例：?id=123&category=book）を取得します。
new URLSearchParams(...)：文字列のままだと扱いづらいため、パラメータを便利に操作できる専用のオブジェクトに変換します。
.get('名前')：指定した名前のパラメータの値を取り出します。

2. フォーム送信（POST/GET）を使う

大量のデータや、パスワードなどの見せたくない情報を送る場合は <form> タグを使用します。

ただし、HTMLファイル間だけで method="POST" のデータを受け取ることはできません（サーバーサイド言語が必要です）。JavaScriptのみで完結させる場合は、GETメソッドを使うか、次のlocalStorageを利用します。

<form action="search_result.html" method="GET">
    <input type="text" name="keyword">
    <button type="submit">検索</button>
</form>

コード解説

method="GET"：入力された内容をURLパラメータ（?keyword=入力値）として送信します。
name="keyword"：データの名前です。これがURLパラメータのキーになります。
送信後は、先ほどの「URLパラメータ」と同じ方法でJavaScriptを使って値を取得できます。

3. localStorage / sessionStorageを使う

ブラウザの保存領域（Web Storage）を使う方法です。

URLにデータが表示されないため見た目がすっきりし、容量の大きなデータも扱えます。localStorage は永続的に、sessionStorage はブラウザを閉じるまで保存されます。

// 送信側：データを保存して遷移
// setItem('キー', '保存したい値')
localStorage.setItem('userName', '田中太郎');
window.location.href = 'mypage.html';

// --------------------------------

// 受け取り側（mypage.html）：データを取得
// getItem('キー')
const name = localStorage.getItem('userName');
console.log(name); // "田中太郎"