HTML 2ページ目の作り方をやさしく解説【初心者でも迷わない手順】

HTMLで1ページ目は作れたものの、2ページ目の追加方法が分からず手が止まってしまう方は少なくありません。
実際には、2ページ目の作り方は難しくなく、新しいHTMLファイルを作成し、リンクでページ同士をつなぐことが基本です。

ただし、ファイル名の付け方、保存場所、相対パスの考え方、戻るリンクの設置などを理解していないと、思うように表示されないことがあります。
この記事では、HTMLで2ページ目を作る流れを、初心者にも分かりやすく順番に解説します。
見た目だけでなく、実用的で迷いにくいWebページ構成までしっかり身につけられます。

HTMLで2ページ目の作り方を基本から理解する

HTMLで2ページ目を作るとは、今ある1枚のHTMLファイルとは別に、もう1つHTMLファイルを作成し、ページ同士をリンクで移動できるようにすることです。
1ページだけの状態では情報量に限界がありますが、2ページ目を作れるようになると、プロフィールページ、問い合わせページ、商品紹介ページなどへ内容を分けられるようになります。

重要なのは、2ページ目は特別な機能ではなく、独立したHTMLファイルを追加するだけだという点です。
そのうえで、aタグを使って1ページ目から2ページ目へ移動できるようにします。
この基本を理解しておくと、3ページ目、4ページ目へと自然に増やせるようになります。

2ページ目は新しいHTMLファイルとして作る

HTMLの2ページ目は、1ページ目の続きとして画面の下に足すものではありません。
別の内容を表示するための、別ファイルとして作成します。
たとえば、1ページ目が index.html なら、2ページ目を about.html や page2.html といった名前で保存する形です。

このとき、どちらのファイルも同じフォルダに置けば、リンク設定が比較的簡単になります。
初心者のうちは、まず同一フォルダ内で複数ページを管理する方法から始めるのがおすすめです。
構造が単純なため、リンク切れや保存場所の混乱を防ぎやすくなります。

1ページ目と2ページ目はリンクで移動する

ページ間を移動するには、aタグを使います。
1ページ目に、2ページ目のファイル名を指定したリンクを書けば、クリック時にそのページへ移動できます。
逆に、2ページ目から1ページ目へ戻るリンクも置いておくと、使いやすい構成になります。

たとえば、同じフォルダ内にある about.html へ移動するなら、href属性にそのファイル名を書きます。
リンクは複数ページサイトの基本機能なので、HTMLの2ページ目を作るときは、ページ作成とリンク設定をセットで考えることが大切です。

HTMLの2ページ目を作る具体的な手順

実際に作る流れはとてもシンプルです。
まず1ページ目が保存されている場所を確認し、その同じフォルダに2ページ目用のHTMLファイルを作成します。
次に、両方のページに必要な見出しや本文を書き、最後にリンクを設置します。

初心者がつまずきやすいのは、コードそのものよりも、ファイルの保存場所や名前の管理です。
そのため、手順を分けて丁寧に進めることが大切です。
ここでは実際の作り方を順番に見ていきます。

手順1 2ページ目用のファイルを作成する

最初に、2ページ目となる新しいHTMLファイルを作ります。
名前は page2.html や about.html など、内容が分かりやすいものにすると管理しやすいです。
ファイル名に日本語や空白を使うと、環境によって扱いづらくなることがあるため、半角英数字を基本にすると安心です。

また、拡張子は必ず .html にします。
テキストファイルのまま保存してしまうと、ブラウザでHTMLとして正しく認識されない場合があります。
作成後は1ページ目と同じフォルダに保存してください。
これだけで、2ページ目の土台は完成です。

手順2 2ページ目にHTMLの基本構造を書く

新しいファイルを作ったら、HTMLの基本構造を記述します。
doctype宣言、html、head、bodyといった基本タグを入れ、その中に2ページ目の内容を書いていきます。
1ページ目をコピーして必要な部分だけ書き換える方法でも問題ありません。

たとえば、2ページ目に自己紹介を書くなら、titleやh1もその内容に合わせて変更します。
複数ページのサイトでは、各ページごとにタイトルや見出しを変えることで、内容の違いが明確になります。
この段階で、どのページに何を書くかを整理しておくと、後からページ数が増えても管理しやすくなります。

手順3 1ページ目から2ページ目へリンクを貼る

次に、1ページ目に2ページ目へのリンクを追加します。
同じフォルダ内にある場合は、href属性にそのままファイル名を書くだけで移動できます。
とても基本的な設定ですが、ここが正しくできていないと2ページ目へ進めません。

コード例は次のようになります。

リンク文字は、利用者に意味が伝わる表現にするのがポイントです。
単に こちら ではなく、プロフィールを見る、詳細ページへ進む など、移動先が分かる書き方にすると使いやすくなります。

リンク切れを防ぐためのファイル構成とパスの考え方

HTMLで2ページ目を作る際、多くの人がつまずくのがパスの指定です。
ファイル自体は作れていても、リンク先の書き方が違うとページが開けません。
その原因の多くは、ファイルの位置関係を正しく把握できていないことにあります。

特に複数ページを作り始めると、フォルダを分けたくなる場面が出てきます。
そこで大切なのが、相対パスの基本を理解することです。
2ページ目の作り方をしっかり身につけたいなら、リンクの仕組みまで一緒に覚えるのが近道です。

同じフォルダならファイル名だけで指定できる

1ページ目と2ページ目が同じフォルダにある場合、hrefには移動先のファイル名だけを書けば大丈夫です。
たとえば index.html と about.html が同じ場所にあるなら、about.html と指定するだけで移動できます。
初心者にとって最も分かりやすい構成です。

この方法の利点は、記述が短く、間違いが起こりにくいことです。
まずは同一フォルダで複数ページを作り、慣れてきたらフォルダ分けに進むと理解しやすくなります。
最初から複雑な構成にしないことが、学習効率を高めるコツです。

別フォルダに置く場合は相対パスを使う

もし2ページ目を別フォルダに保存するなら、相対パスで場所を指定します。
たとえば pages というフォルダの中に about.html があるなら、pages/about.html のように書きます。
逆に、1つ上の階層へ戻る場合は、../ を使う考え方が必要です。

この仕組みは一見難しそうですが、現在のファイルから見てどこに相手のファイルがあるかを考えるだけです。
パスの理解が深まると、CSSや画像ファイルの読み込みにも応用できます。
HTMLの2ページ目作成は、サイト全体の構造理解にもつながる重要な学習テーマです。

HTMLで2ページ目を作るときによくある失敗と対処法

HTMLの2ページ目は基本的な作業ですが、細かなミスで表示できなくなることがあります。
特に初心者は、コードの誤りよりも、保存形式やファイル名のズレ、パス指定の間違いで悩みやすいです。
しかし、よくある失敗の傾向を知っておけば、原因を素早く見つけやすくなります。

ここでは、2ページ目の作り方でよくある代表的なミスと、その対処法を整理して解説します。
最初から完璧を目指すより、どこを確認すれば直せるかを知っておくことが大切です。

リンクをクリックしてもページが開かない

最も多いのが、リンクを押しても2ページ目が表示されないケースです。
この場合は、hrefに書いたファイル名と、実際のファイル名が一致しているかを最優先で確認します。
大文字と小文字の違い、拡張子の誤り、スペルミスなどが原因になることがあります。

また、保存したフォルダが違っている可能性もあります。
見た目では同じように見えても、別の場所に保存されていれば正しく移動できません。
リンク切れが起きたときは、ファイル名、保存場所、パス指定の3点を順番に確認すると、問題を見つけやすくなります。

2ページ目は開くがレイアウトが崩れる

2ページ目自体は開けるのに、CSSが反映されず見た目が崩れることがあります。
これはHTMLファイルの場所が変わったことで、CSSファイルへのパスが合わなくなっているケースが多いです。
画像が表示されない場合も、同様にファイル位置とパスの確認が必要です。

1ページ目では正常でも、2ページ目でだけ崩れるなら、読み込んでいるCSSや画像の指定を見直してください。
複数ページ構成では、HTML本文だけでなく関連ファイルへの参照も正しく設定する必要があります。
この確認を習慣化すると、ページ数が増えても安定したサイトを作りやすくなります。

見やすい複数ページサイトにするための作り方のコツ

HTMLで2ページ目を作れるようになったら、次は見やすく使いやすいサイト構成を意識すると、完成度が大きく上がります。
単にページを増やすだけではなく、各ページの役割を分け、利用者が迷わず移動できるように設計することが大切です。

特にスマホ閲覧では、移動しやすさと情報の整理が重要です。
ナビゲーション、戻るリンク、見出し構成などを整えるだけでも、サイトの印象はかなり変わります。
ここでは、2ページ目以降を作る際に意識したい実践的なコツを紹介します。

ページごとに役割を分けて情報を整理する

複数ページ構成では、1ページにすべてを詰め込むのではなく、内容ごとにページを分けると分かりやすくなります。
たとえば、トップページ、自己紹介ページ、問い合わせページのように役割を分けることで、利用者は必要な情報へ到達しやすくなります。

また、各ページのtitleやh1を内容に合わせて変えることで、ページの意味も明確になります。
SEOの面でも、各ページが何を扱うのかが整理されているほうが理解されやすくなります。
HTMLの2ページ目は単なる追加ではなく、サイト構成を整える第一歩と考えると効果的です。

ナビゲーションと戻る導線を必ず設置する

2ページ目を作ったら、移動のしやすさも整えておきたいところです。
1ページ目から2ページ目へ行けても、戻れない構成では使い勝手が下がります。
そのため、各ページに共通のナビゲーションや戻るリンクを置くのがおすすめです。

たとえば、ページ上部にメニューを配置したり、本文下にトップへ戻るリンクを置いたりするだけでも、利用者の迷いを減らせます。
サイトが小規模でも、導線設計を意識することで、読みやすさと信頼感が高まります。
作れることと、使いやすく作ることは別なので、この視点を早めに持っておくと成長が速くなります。

まとめ

HTMLで2ページ目を作る方法は、新しいHTMLファイルを作成し、aタグでリンクを貼るという基本を押さえれば十分に実践できます。
難しそうに見えても、仕組み自体はとてもシンプルです。

特に大切なのは、次のポイントです。

• 2ページ目は別のHTMLファイルとして作る
• 1ページ目と2ページ目をリンクでつなぐ
• 同じフォルダならファイル名だけで指定できる
• 表示されないときはファイル名、場所、パスを確認する
• 戻る導線やナビゲーションも整える

最初は index.html と page2.html の2枚だけでも十分です。
そこから3ページ目、4ページ目へと増やしながら、フォルダ構成や相対パスの理解を深めていけば、実用的なWebサイトを作れるようになります。
まずは小さく作って、確実に動く2ページ構成を完成させてみてください。