ホーム > 基礎知識 > 【HTML】Webサイトの基本！画面遷移を実装してみよう

【HTML】Webサイトの基本！画面遷移を実装してみよう

投稿日：2026/03/27

最終更新日：2026/03/27

Webサイト開発では必要となってくる「画面遷移」これをWebサイトに実装するだけでも本格的なWebサイトの実現に繋がります。

今回の記事ではHTMLファイルを用いて画面遷移がどのようなところで使われているか、実装するにはどうすればいいのかなど基本的なことを中心に解説していきます。

今回の記事でわかること

Webサイトなどで画面遷移がどこで使われているか
HTMLでの画面遷移の実装方法

Webサイトでどこに画面遷移が使われているのか

そもそも画面遷移とはページ間の移動のことを意味します。 Webサイトで画面遷移は色々なところで使われており、アプリ開発でも幅広く使われています。

実際の例を考えてみましょう。 Webサイトでよくあるヘッダーナビゲーションというのがあります。それは他のページに移動するのを容易にするためにあるものです。

画面遷移がないWebサイト想像してみると1ページに全ての情報を記述することになり、とても不便です。

これらの理由でWebサイトなどで画面遷移は必須であるのです。

Yama

私がプログラミング始めたてでいざWebサイトを開発するという段階で画面遷移を学んだ時は一気に開発している感が増すので実際に作ってみることをお勧めします

HTMLファイルで画面遷移の実装方法

HTMLで画面遷移を実装する方法はとっても簡単です。以下のコードをご覧ください。

                
<a href="https://y-develo.com">YamaDev Blog</a>

以上のようなコードをHTMLファイルに組み込むだけで画面遷移を実装することが可能となります。
これは「aタグ」と言われるものです。

href=""には画面遷移先のリンクを記述します。またaタグ内の「YamaDev Blog」とはaタグをどのような文字で表示させるかを決めることができます。

以下は上記のコードをHTMLファイルに記述した際の実際の見た目です。

Yama

これだけでも問題はないですがUI(見た目の良さ)を向上させるためには工夫する必要があります。

独学でプログラミング学習に時間がかかってしまっている方に朗報です！

プログラミングを理解するのにはどうしても時間がかかってしまうものです。

本を買うにしても結局わからなくなってしまう

AIに聞いても結局理解できずになんとなく作ってしまう

そんな時に心強いのがこちらのプログラミングスクールですカウンセリングが無料で受けることができます。

↓↓↓

実際にHTMLとCSSを用いて簡単な画面遷移を実装してみよう

今回は簡単な画面遷移を実装していきます。

使用するエディタはVSCodeで拡張機能「Live Server」を使用していきます。

まずはフォルダを作成しましょう。名前は「test」です。

それからHTMLファイルとCSSファイルをtestフォルダの中に作成しましょう。

現状は以下のようになっているはずです。

では次に画面遷移先のHTMLファイルを作成します。

page1とpage2とpage3を作成しましょう。
現在のフォルダ内はこのようになっているはずです。

index.htmlには以下のコードを記述しましょう。CSSファイルは後ほど記述します。

index.html

                
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画面遷移</title>
</head>
<body>
  <a href="/page1.html">page1</a>
  <a href="/page2.html">page2</a>
  <a href="/page3.html">page3</a>
</body>
</html>

以下のpage1~3は画面遷移で移動したということを明確にするために作成しました。

page1

                
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>page1</title>
</head>
<body>
  <p>ここはpage1です</p>
</body>
</html>

page2

                
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>page2</title>
</head>
<body>
  <p>ここはpage2です</p>
</body>
</html>

page3

                
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>page3</title>
</head>
<body>
  <p>ここはpage3です</p>
</body>
</html>

ではいよいよ「Live Server」を用いて作ったコードを作成する段階です。

実際に起動してみましょう。起動後はこのような画面になっているはずです。