6日でできる 新HTML入門｜リンクの作り方とaタグの基本②

リンクの開き方や移動先を使い分ければ、HTMLページはもっと便利で迷わないナビゲーションになります。

HTMLのリンクは、別ページへ移動するだけの仕組みではありません。リンク先を新しいタブで開いたり、同じ名前のウィンドウを再利用したり、別フォルダにあるファイルへ移動したり、同じページ内の特定の場所へジャンプしたりできます。

前回は、<a> タグとhref属性を使った基本的なリンク、画像リンク、外部サイトへのリンクを学びました。今回は、その応用として、target属性、フォルダ階層を考えた相対パス、id属性を使ったページ内リンクについて解説します。

リンクを正しく使えるようになると、ページ同士の移動が分かりやすくなり、長いページでも目的の場所へすぐ移動できるようになります。ここでは、旅行情報サイトやサービス紹介ページを例にしながら、少し発展的なリンクの作り方をやさしく確認していきます。

新しいタブでリンクを開く

通常、<a> タグでリンクを作ると、クリックしたページと同じタブでリンク先が開きます。しかし、現在のページを残したまま、別のタブでリンク先を開きたい場合があります。

たとえば、外部サイトを紹介するとき、元のページを閉じずに参考サイトだけ別タブで開けると便利です。このようなときに使うのがtarget属性です。

新しいタブまたは新しいウィンドウでリンク先を開きたい場合は、target="_blank" を指定します。

<a href="https://www.example.com/" target="_blank">外部サイトを見る</a>

この書き方では、href属性に移動先のURLを指定し、target属性で開き方を指定しています。target="_blank" を使うことで、元のページを残したままリンク先を開けます。

属性役割
href属性リンク先のURLやファイルパスを指定する
target属性リンク先をどこに開くか指定する
target="_blank"新しいタブまたはウィンドウでリンク先を開く

外部サイトへリンクするときは、target="_blank" を使うと、読者が元のページへ戻りやすくなります。ただし、すべてのリンクを新しいタブで開けばよいわけではありません。同じサイト内の通常のページ移動では、同じタブで開いたほうが自然な場合もあります。

図1：target属性でリンクの開き方を変える

この図から分かること

target属性を使うと、リンク先をどこに開くか指定できます。target="_blank" を指定すると、現在のページを残したまま、新しいタブまたはウィンドウでリンク先を開けます。

外部サイトや参考資料へのリンクでは、元のページを見失いにくくなるため便利です。一方で、同じサイト内の通常の移動では、無理に新しいタブにしないほうが自然な場合もあります。

target="_blank"を使ったHTMLファイルの例

ここでは、旅行情報の参考サイトを新しいタブで開くHTMLを作成します。外部サイトへ移動するため、href属性にはhttps://から始まる完全なURLを指定します。

ファイル名： Lesson7-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク応用 新しいタブ</title>
</head>
<body>
  <h1>海外旅行の参考サイト</h1>
  <p>海外の観光情報を調べたいときは、次のサイトも参考になります。</p>
  <p>
    <a href="https://www.lonelyplanet.com/" target="_blank">Lonely Planetで旅行情報を見る</a>
  </p>
</body>
</html>

ブラウザの表示例

このHTMLでは、Lonely Planetのサイトへ移動するリンクを作っています。href属性には外部サイトのURLを指定し、target="_blank" によって新しいタブで開くようにしています。

外部サイトへリンクするときは、URLの先頭にあるhttps://を省略しないようにしましょう。https://を含めた完全なURLを書くことで、ブラウザが外部サイトへのリンクとして正しく判断できます。

名前を付けたウィンドウを再利用する

target属性には、_blank以外の値も指定できます。任意の名前を付けると、その名前を持つタブまたはウィンドウを開く動きになります。

たとえば、target="travelInfo" のように指定すると、最初にクリックしたときはtravelInfoという名前のタブまたはウィンドウが作られます。その後、同じtarget名を持つ別のリンクをクリックすると、同じタブまたはウィンドウが再利用されます。

<a href="beach.html" target="travelInfo">ビーチ情報を見る</a>
<a href="cruise.html" target="travelInfo">クルーズ情報を見る</a>

この場合、ビーチ情報とクルーズ情報は、同じtravelInfoという表示先を使います。複数のリンク先を同じ別タブで切り替えて表示したいときに使えます。

target属性の値動き
target="_blank"毎回、新しいタブまたはウィンドウで開く
target="任意の名前"同じ名前のタブまたはウィンドウを再利用する
targetを指定しない現在のタブでリンク先を開く

名前付きのtargetは少し応用的な書き方ですが、複数の関連リンクを同じ別タブに表示したい場合に便利です。

ウィンドウ名を使ったHTMLファイルの例

ここでは、旅行情報の一覧ページを作ります。ビーチリゾートとクルーズ旅行のリンクを用意し、どちらもtarget="travelWindow" を指定します。

ファイル名： Lesson7-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク応用 ウィンドウ再利用</title>
</head>
<body>
  <h1>旅行プラン一覧</h1>
  <p>気になる旅行プランを選んで、詳しい情報を確認しましょう。</p>

  <p>
    <a href="page1/beach-resort.html" target="travelWindow">ビーチリゾート情報を見る</a><br>
    <a href="page2/cruise-trip.html" target="travelWindow">クルーズ旅行情報を見る</a>
  </p>
</body>
</html>

ブラウザの表示例

このHTMLでは、2つのリンクに同じtarget名であるtravelWindowを指定しています。最初にクリックしたリンクでtravelWindowが開き、次にもう一方のリンクをクリックすると、同じtravelWindowに別のページが表示されます。

href属性には、それぞれpage1フォルダとpage2フォルダの中にあるHTMLファイルを指定しています。フォルダ名を含めて指定している点にも注目しましょう。

ビーチリゾートの詳細ページを作る

次に、page1フォルダの中にビーチリゾートの詳細ページを作成します。

ファイル名： beach-resort.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ビーチリゾート情報</title>
</head>
<body>
  <h1>ビーチリゾートへようこそ</h1>
  <p>白い砂浜と透明な海が広がるリゾート地では、海水浴やシュノーケリングを楽しめます。</p>

  <h2>基本情報</h2>
  <ul>
    <li><strong>所在地：</strong>沖縄県宮古島市</li>
    <li><strong>おすすめ時期：</strong>5月から10月</li>
    <li><strong>楽しめる内容：</strong>海水浴、シュノーケリング、夕日鑑賞</li>
  </ul>

  <h2>アクセス</h2>
  <ul>
    <li>宮古空港から車で約30分</li>
    <li>レンタカーやタクシーの利用が便利です</li>
  </ul>

  <p><a href="../Lesson7-2.html">旅行プラン一覧へ戻る</a></p>
</body>
</html>

ブラウザの表示例

このファイルはpage1フォルダの中に置く想定です。最後の戻るリンクでは、href="../Lesson7-2.html" と書いています。

../ は、1つ上のフォルダへ戻るという意味です。beach-resort.html はpage1フォルダ内にあるため、同じ階層にあるLesson7-2.htmlへ戻るには、いったん親フォルダへ戻る必要があります。

クルーズ旅行の詳細ページを作る

続いて、page2フォルダの中にクルーズ旅行の詳細ページを作成します。

ファイル名： cruise-trip.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クルーズ旅行情報</title>
</head>
<body>
  <h1>クルーズ旅行へようこそ</h1>
  <p>クルーズ旅行では、船内で食事やショーを楽しみながら、複数の寄港地をめぐる旅ができます。</p>

  <h2>おすすめコース</h2>
  <ul>
    <li>3泊4日：国内ショートクルーズ</li>
    <li>7泊8日：地中海クルーズ</li>
    <li>10泊11日：カリブ海クルーズ</li>
  </ul>

  <h2>予約方法</h2>
  <p>旅行会社の窓口や公式Webサイトから申し込みできます。</p>

  <p><a href="../Lesson7-2.html">旅行プラン一覧へ戻る</a></p>
</body>
</html>

ブラウザの表示例

このファイルはpage2フォルダの中に置く想定です。page2フォルダからLesson7-2.htmlへ戻るため、こちらもhref="../Lesson7-2.html" と書いています。

同じ戻るリンクでも、ファイルの置き場所によってhref属性の書き方が変わります。HTMLでは、リンク元のファイルから見て、リンク先がどこにあるのかを考えることがとても大切です。

サブフォルダ内のファイルへリンクする

Webサイトを作っていると、HTMLファイルをフォルダで整理することがあります。たとえば、イベントページをeventsフォルダにまとめたり、観光情報をspotsフォルダにまとめたりする形です。

現在のHTMLファイルから見て、リンク先がサブフォルダの中にある場合は、href属性にフォルダ名とファイル名を続けて書きます。

<a href="events/summer-festival.html">夏祭り情報を見る</a>

この例では、eventsフォルダの中にあるsummer-festival.htmlへリンクしています。

リンク先の場所href属性の書き方
同じフォルダ内href="about.html"
eventsフォルダ内href="events/summer-festival.html"
page2フォルダ内href="page2/cruise-trip.html"

サブフォルダ内のファイルへリンクするときは、フォルダ名、スラッシュ、ファイル名の順番で書きます。フォルダ名やファイル名を間違えるとリンク先が開けないため、実際のフォルダ構成と見比べながら確認しましょう。

図2：フォルダ階層に合わせたリンクパス

この図から分かること

リンク先がサブフォルダの中にある場合は、href属性にフォルダ名とファイル名を含めて書きます。eventsフォルダの中にsummer-festival.htmlがあるなら、href="events/summer-festival.html" のように指定します。

パスを書くときは、リンク元のHTMLファイルから見たリンク先の位置を考えることが大切です。フォルダ構成を整理しておくと、リンクの指定ミスを減らせます。

サブフォルダ内ページへ移動するHTMLファイルの例

ここでは、イベント一覧ページから、eventsフォルダ内にある夏祭り情報ページへ移動するリンクを作ります。

ファイル名： Lesson7-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク応用 サブフォルダ</title>
</head>
<body>
  <h1>季節のイベント案内</h1>
  <p>気になるイベントを選んで、詳しい情報を確認しましょう。</p>

  <p>
    <a href="events/summer-festival.html">夏祭りイベント情報を見る</a>
  </p>
</body>
</html>

ブラウザの表示例

このHTMLでは、href属性にevents/summer-festival.htmlを指定しています。これは、現在のLesson7-3.htmlから見て、eventsフォルダの中にあるsummer-festival.htmlへ移動するという意味です。

ファイルをフォルダで分けると、Webサイト全体を整理0しやすくなります。ただし、フォルダを使う場合は、リンクパスもフォルダ構成に合わせて正しく書く必要があります。

夏祭りイベントページを作る

次に、eventsフォルダの中に夏祭りイベントページを作ります。

ファイル名： summer-festival.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>夏祭りイベント情報</title>
</head>
<body>
  <h1>全国の夏祭りイベント</h1>
  <p>夏には、花火大会や盆踊り、屋台グルメなど、地域ごとに特色あるイベントが開催されます。</p>

  <h2>主なイベント</h2>
  <ul>
    <li><strong>隅田川花火大会：</strong>東京の夜空を彩る大規模な花火大会です。</li>
    <li><strong>阿波おどり：</strong>徳島で長く親しまれている踊りの祭典です。</li>
    <li><strong>仙台七夕まつり：</strong>色鮮やかな七夕飾りが街を彩る夏祭りです。</li>
  </ul>

  <h2>開催情報</h2>
  <table>
    <tr>
      <th>イベント名</th>
      <th>時期</th>
      <th>地域</th>
    </tr>
    <tr>
      <td>隅田川花火大会</td>
      <td>夏季</td>
      <td>東京都</td>
    </tr>
    <tr>
      <td>阿波おどり</td>
      <td>8月中旬</td>
      <td>徳島県</td>
    </tr>
    <tr>
      <td>仙台七夕まつり</td>
      <td>8月上旬</td>
      <td>宮城県</td>
    </tr>
  </table>

  <p>浴衣を着て出かけたり、屋台の食べ物を楽しんだりしながら、夏らしい時間を過ごせます。</p>

  <p><a href="../Lesson7-3.html">季節のイベント案内へ戻る</a></p>
</body>
</html>

ブラウザの表示例

このページはeventsフォルダ内にあるため、Lesson7-3.htmlへ戻るにはhref="../Lesson7-3.html" と書きます。

../ は親フォルダを表します。eventsフォルダの中から1つ上のフォルダへ戻り、そこにあるLesson7-3.htmlを開くという流れです。

親フォルダへ戻るリンクを作る

サブフォルダ内のページから、1つ上の階層にあるページへ移動したい場合は、../ を使います。これは、親フォルダへ戻るための書き方です。

たとえば、次のようなフォルダ構成を考えます。

travel-site
├─ index.html
├─ page1
│  └─ beach-resort.html
└─ page2
   ├─ cruise-trip.html
   ├─ summer-festival.html
   └─ Lesson7-4.html

このとき、page2フォルダ内のLesson7-4.htmlから、親フォルダにあるindex.htmlへ戻るには、次のように書きます。

<a href="../index.html">ホームに戻る</a>

../ は、現在のフォルダから1つ上へ戻るという意味です。そのあとにindex.htmlを書くことで、親フォルダ内のindex.htmlへ移動できます。

現在の場所移動先href属性の書き方
page2/Lesson7-4.htmlindex.htmlhref="../index.html"
page1/beach-resort.htmlLesson7-2.htmlhref="../Lesson7-2.html"
events/summer-festival.htmlLesson7-3.htmlhref="../Lesson7-3.html"

フォルダの中にいるときは、リンク元の場所が変わっている点に注意しましょう。同じindex.htmlへリンクする場合でも、どのファイルからリンクするかによってhref属性の書き方は変わります。

親フォルダへ戻るHTMLファイルの例

ここでは、page2フォルダの中にあるLesson7-4.htmlから、親フォルダにあるindex.htmlへ戻るリンクを作ります。

ファイル名： Lesson7-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク応用 親フォルダへ戻る</title>
</head>
<body>
  <h1>旅行情報の詳細ページ</h1>
  <p>このページはpage2フォルダの中に保存されています。</p>

  <p>
    <a href="../index.html">旅行情報トップページへ戻る</a>
  </p>
</body>
</html>

ブラウザの表示例

このHTMLはpage2フォルダの中に保存する想定です。親フォルダにあるindex.htmlへ移動するため、href属性には../index.htmlを指定しています。

../ を使うことで、現在のフォルダから1つ上の階層へ戻れます。フォルダ構成が深くなるほど、相対パスの考え方が重要になります。

トップページを作る

次に、親フォルダに置くトップページを作ります。page1フォルダやpage2フォルダの中にある各ページへ移動できるリンクを用意します。

ファイル名： travel-index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>旅行情報トップページ</title>
</head>
<body>
  <h1>旅行情報トップページ</h1>
  <p>以下のリンクから、旅行に関する各コンテンツへ移動できます。</p>

  <ul>
    <li><a href="page1/beach-resort.html">ビーチリゾート情報を見る</a></li>
    <li><a href="page2/cruise-trip.html">クルーズ旅行情報を見る</a></li>
    <li><a href="events/summer-festival.html">夏祭りイベント情報を見る</a></li>
  </ul>
</body>
</html>

ブラウザの表示例

この例では、ファイル名をtravel-index.htmlにしています。トップページとしてindex.htmlを使うことも多いですが、学習用として内容が分かりやすい名前にしています。

それぞれのリンクでは、フォルダ名とファイル名を組み合わせて指定しています。page1フォルダ内のファイルへ移動する場合はpage1/ファイル名.html、page2フォルダ内のファイルへ移動する場合はpage2/ファイル名.htmlのように書きます。

ページ内リンクとは

ページ内リンクは、同じページ内の特定の場所へ移動するリンクです。長いページの上部に目次を作り、クリックすると該当する見出しまで移動できるようにするときによく使います。

ページ内リンクを作るには、移動先にid属性で目印を付けます。そして、リンク側のhref属性に#とid名を組み合わせて書きます。

基本の流れは次のとおりです。

<a href="#design">デザインサービスへ移動</a>

<h2 id="design">デザインサービス</h2>

この例では、h2要素にid="design" という目印を付けています。リンク側ではhref="#design" と書くことで、そのidを持つ場所へ移動できます。

書く場所書き方役割
移動先の見出しid="design"ページ内の目印を作る
移動元のリンクhref="#design"id="design" の場所へ移動する

id属性の値は、同じページ内で重複しないようにします。同じidを複数の要素に付けると、どこへ移動すればよいか分かりにくくなります。

図3：ページ内リンクの仕組み

この図から分かること

ページ内リンクでは、移動先の要素にid属性で目印を付けます。リンク側では、href属性に#とid名を組み合わせて指定します。

長いページの先頭に目次を作ると、読者は目的の項目へすぐ移動できます。JavaScriptを使わず、HTMLだけで実装できる便利なナビゲーションです。

ページ内リンクを使ったHTMLファイルの例

ここでは、サービス紹介ページの上部に目次を作り、各サービスの見出しへ移動できるようにします。

ファイル名： Lesson7-5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク応用 ページ内ナビゲーション</title>
</head>
<body>
  <h1>Web制作サービス一覧</h1>
  <p>気になるサービス名をクリックすると、同じページ内の説明へ移動できます。</p>

  <h2>目次</h2>
  <ul>
    <li><a href="#design">デザインサービス</a></li>
    <li><a href="#development">開発サービス</a></li>
    <li><a href="#support">サポートプラン</a></li>
  </ul>

  <br><br><br><br><br>

  <h2 id="design">デザインサービス</h2>
  <p>ロゴ制作、バナー制作、Webサイトの画面設計など、見た目と使いやすさを考えたデザインを行います。</p>

  <br><br><br><br><br>

  <h2 id="development">開発サービス</h2>
  <p>HTMLを使ったページ作成や、Webサイトの基本的な構造づくりを行います。</p>

  <br><br><br><br><br>

  <h2 id="support">サポートプラン</h2>
  <p>公開後の更新作業、内容修正、簡単な運用相談など、Webサイトを続けて使うための支援を行います。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、目次のリンクにhref="#design"、href="#development"、href="#support" を指定しています。

移動先となる見出しには、それぞれid="design"、id="development"、id="support" を付けています。href属性の#以降の名前と、移動先のid属性の値が対応していることがポイントです。

学習用に移動の動きを確認しやすくするため、ここでは<br>を複数入れて間隔を作っています。ただし、実際のページで余白や配置を整える場合はCSSを使うのが基本です。CSSについては、CSSに関する記事以降で解説します。

id属性を付けるときの注意点

ページ内リンクでは、id属性が目印になります。そのため、id属性の値は分かりやすく、重複しない名前にすることが大切です。

id属性の例内容
id="design"デザインサービスの見出し
id="development"開発サービスの見出し
id="support"サポートプランの見出し

id属性の値は、ページ内で一意にします。一意とは、同じページの中で同じ名前を複数使わないという意味です。

また、id名は内容が分かる名前にすると管理しやすくなります。id="section1" のような名前でも動きますが、後から見直したときに何の項目なのか分かりにくくなることがあります。

分かりやすいid名分かりにくいid名
id="design"id="a1"
id="access"id="box2"
id="contact"id="x"

ページ内リンクは、長いページを読みやすくするためにとても便利です。目次、よくある質問、サービス一覧、アクセス案内など、項目数が多いページで活用しやすい仕組みです。

href="#識別子"の考え方

ページ内リンクでは、href属性に#識別子の形で移動先を指定します。この#は、同じページ内のidを探すための記号です。

たとえば、次のように対応します。

リンク側移動先
href="#design"id="design"
href="#development"id="development"
href="#support"id="support"

href="#design" と書いた場合、ブラウザは同じページの中からid="design" が付いた要素を探し、その位置へ移動します。

ページ内リンクを使うと、URLの末尾に#designのような文字が付くことがあります。これは、ページ内のどの位置を開いているかを示す目印です。URLを共有するときにも、特定の項目を直接開くために使える場合があります。

特殊なリンクを使い分ける

今回学んだリンクは、どれも<a>タグを使って作ります。ただし、属性やパスの書き方によって、動きが変わります。

目的書き方の例
新しいタブで開くtarget="_blank"
名前付きウィンドウを再利用するtarget="travelWindow"
サブフォルダ内のページへ移動するhref="events/summer-festival.html"
親フォルダのページへ戻るhref="../index.html"
同じページ内の見出しへ移動するhref="#design"

リンクを作るときは、まず「どこへ移動したいのか」「どのように開きたいのか」を考えます。そのうえで、href属性にリンク先を書き、必要に応じてtarget属性やid属性を組み合わせます。

リンクがうまく動かないときに確認すること

リンクが正しく動かないときは、href属性やファイルの場所を順番に確認しましょう。

確認項目内容
ファイル名href属性に書いたファイル名と実際のファイル名が一致しているか
拡張子.htmlを書き忘れていないか
フォルダ名page1、page2、eventsなどの名前が正しいか
親フォルダ指定../ の数が正しいか
外部URLhttps://から始まる完全なURLになっているか
target属性_blankやウィンドウ名を正しく書いているか
id属性href="#名前" と id="名前" が一致しているか
重複id同じidを複数の要素に付けていないか

特にフォルダを使ったリンクでは、現在のHTMLファイルがどこにあるかを考えることが大切です。リンク元から見たリンク先の位置を確認すると、相対パスのミスに気づきやすくなります。

使用したタグと属性一覧

タグ／属性用途
<a href="URL">...</a>リンクを作成する
href属性リンク先のURL、ファイルパス、ページ内の移動先を指定する
target="_blank"リンク先を新しいタブまたはウィンドウで開く
target="ウィンドウ名"同じ名前のタブまたはウィンドウを再利用する
href="subdir/page.html"サブフォルダ内のファイルを指定する
href="../page.html"親フォルダ内のファイルを指定する
id属性ページ内リンクの移動先になる目印を付ける
href="#識別子"同じページ内の指定したidへ移動する