【6日でできるHTML入門】リンクの作成②

　HTMLの<a>タグは、クリックで別ページへ移動する基本機能に加え、現在のページを維持したまま別タブで開く、複数階層のフォルダ構成にも対応したリンクを作成する、同一ページ内の特定位置へスクロールして飛ぶ、など多彩な機能を備えています。ここでは、それら「少し特殊なリンク」の実装方法を具体的なHTMLサンプルとブラウザ表示例を交えて学習します。

１．新しいタブ／ウィンドウで開くリンク

1.1. target="_blank" の基本動作

以下の例では、外部サイト「Lonely Planet」を新しいタブで開きます。

  • target="_blank" は、リンククリック時に元のタブを維持し、新しいタブ／ウィンドウで開きます。

ファイル名： lesson07-1.html

<!-- lesson07-1.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク②：新しいタブ🏖️</title>
</head>
<body>
  <h1>海外リゾート情報を新しいタブで開く</h1>
  <p>
    詳細はこちら：
    <a href="https://www.lonelyplanet.com/" target="_blank">Lonely Planet</a>
  </p>
</body>
</html>

ブラウザの出力例

【lesson07-1.html】

・海外リゾート情報を新しいタブで開く
詳細はこちら： Lonely Planet（クリックで新しいタブが開きます）

1.2. ウィンドウ名を用いた再利用

同じ名前を指定すると、既存のタブ（ウィンドウ）を再利用します。

ファイル名： lesson07-2.html

<!-- lesson07-2.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク②：ウィンドウ再利用🔄</title>
</head>
<body>
  <h1>同じウィンドウに情報を表示</h1>
  <p>
    <a href="page1/resort.html" target="infoWindow">ビーチリゾートへ</a><br>
    <a href="page2/cruise.html" target="infoWindow">クルーズ旅行へ</a>
  </p>
</body>
</html>

ファイル名：resort.html

「page1」フォルダを作成して、その中に「resort.html」を作成します。

<!-- ファイル名: page2/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>24時間（ビーチエリア）</li>
    <li><strong>入場料：</strong>無料</li>
  </ul>
  <h2>アクセス</h2>
  <ul>
    <li>宮古空港から車で約30分</li>
    <li>レンタカー・タクシー利用が便利</li>
  </ul>
  <p><a href="../lesson07-2.html">◀ 情報一覧に戻る</a></p>
</body>
</html>

ファイル名： cruise.html

「page2」フォルダを作成して、その中に「cruise.html」を作成します。

<!-- ファイル名: page2/cruise.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クルーズ旅行🚢</title>
</head>
<body>
  <h1>豪華クルーズ旅行へようこそ🚢</h1>
  <p>大海原をゆったりと航海する贅沢な旅。船内にはプールやシアター、各国料理のレストランなどがあり、飽きることなくお楽しみいただけます。</p>
  <h2>おすすめコース</h2>
  <ul>
    <li>7泊8日：地中海クルーズ</li>
    <li>10泊11日：カリブ海クルーズ</li>
    <li>14泊15日：世界一周クルーズ</li>
  </ul>
  <h2>ご予約方法</h2>
  <p>公式ウェブサイトまたはお近くの旅行代理店で承っております。</p>
  <p><a href="../lesson07-2.html">◀ 情報一覧に戻る</a></p>
</body>
</html>

動作

  • infoWindow タブがない場合 → 新規に「infoWindow」タブを作成し、最初のリンク先を表示
  • infoWindow タブがある場合 → 既存の infoWindow タブに後続のリンク先を表示
  • target="infoWindow" により、同じ名前のタブを繰り返し利用できます。

【lesson07-2.html】

【resort.html】

【cruise.html】

２．別フォルダ内ファイルへのリンクパス

2.1. サブフォルダ参照

リンク元から見てサブフォルダ内のファイルを指定します。

ファイル名： lesson07-3.html

<!-- lesson07-3.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク②：サブフォルダ⛱️</title>
</head>
<body>
  <h1>サブフォルダ内のページへ移動</h1>
  <p>
    <a href="page2/summer_festival.html">夏祭り情報を見る</a>
  </p>
</body>
</html>

ファイル名： summer_festival.html

「page2」フォルダの中に「cruise.html」を作成します。

<!-- ファイル名: page2/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>：徳島で400年の伝統を誇る踊りの祭典。</li>
    <li><strong>仙台七夕まつり</strong>：七夕飾りが彩る東北最大級の夏祭り。</li>
  </ul>

  <h2>開催日程と会場</h2>
  <table>
    <tr><th>祭り名</th><th>開催日程</th><th>会場</th></tr>
    <tr><td>隅田川花火大会</td><td>8月第１土曜</td><td>隅田川両岸</td></tr>
    <tr><td>阿波おどり</td><td>8月12–15日</td><td>徳島市内</td></tr>
    <tr><td>仙台七夕まつり</td><td>8月6–8日</td><td>仙台市中心部</td></tr>
  </table>

  <p>屋台では、たこ焼き・焼きそば・かき氷などの定番グルメが楽しめます。浴衣を着て、夏の夜を満喫しましょう！</p>

  <p><a href="../lesson07-3.html">◀ 情報一覧ページへ戻る</a></p>
</body>
</html>

ブラウザの出力例

サブフォルダ内のページへ移動
夏祭り情報を見る（クリックで page2/summer_festival.html へ移動）

  • href="page2/ファイル名.html" でサブフォルダを参照します。

【lesson07-3.html】

【summer_festival.html】

2.2. 親フォルダ参照

リンク元がサブフォルダ内の場合、../ を使って親フォルダへ戻ります。

  • ../ は親フォルダを示す相対パスです。

フォルダ構成

index.html
page1/
 └─ resort.html
page2/
 ├─ cruise.html
 ├─ summer_festival.html
 └─ lesson07-4.html

ファイル名： lesson07-4.html

「page2」フォルダの中に「lesson07-4.html」を作成します。

<!-- page2/lesson07-4.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク②：トップへ戻る🔙</title>
</head>
<body>
  <h1>トップページへ戻る</h1>
  <p>
    <a href="../index.html">ホームに戻る</a>
  </p>
</body>
</html>

ファイル名： index.html

<!-- ファイル名: 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/resort.html">🏖️ ビーチリゾート情報</a></li>
    <li><a href="page2/cruise.html">🚢 クルーズ旅行情報</a></li>
    <li><a href="page2/summer_festival.html">🏮 全国の夏祭り情報</a></li>
  </ul>
</body>
</html>

ブラウザの出力例

トップページへ戻る
ホームに戻る（クリックで ../index.html へ移動）

【lesson07-4.html】

【index.html】

３．ページ内リンク（アンカーリンク）

3.1. 目印にする要素へ id 属性を付与

対象の見出しなどに id を設定します。

ファイル名： lesson07-5.html

<!-- lesson07-5.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク②：ページ内ナビ📑</title>
</head>
<body>
  <h1>サービス一覧</h1>
  <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><br><br><br><br>
  <h2 id="design">デザインサービス</h2>
  <p>ロゴ制作からUI/UXデザインまで幅広く対応します。</p>

  <br><br><br><br><br><br><br><br><br>
  <h2 id="development">開発サービス</h2>
  <p>Webアプリケーションやモバイルアプリ開発を行います。</p>

  <br><br><br><br><br><br><br><br><br>
  <h2 id="support">サポートプラン</h2>
  <p>納品後の保守・運用支援プランをご用意しています。</p>
</body>
</html>

ブラウザの出力例

使用例

  • リストの「デザインサービス」をクリックすると、同一ページ内の <h2 id="design"> までスクロールして移動します。

3.2. href="#section-id" の動作

  • href="#design" で、同一ページ内の id="design" 要素へジャンプ
  • URL末尾に #design が付くため、後から直接開くことも可能です。

3.3. クイックナビゲーションへの応用

  • 長いページの冒頭に目次を設け、各セクションへのリンクを配置すると、ユーザーが目的の項目へ瞬時に移動できます。
  • JavaScriptを使わず、HTMLだけで実装できるため、軽量かつアクセシビリティに優れています。

まとめ

ここで学んだタグ・属性は以下の通りです。

タグ／属性用途
<a href="URL">…</a>リンクを作成
target="_blank"新しいタブ／ウィンドウでリンク先を開く
target="ウィンドウ名"同名のウィンドウを再利用、なければ新規作成
href="subdir/page.html"サブフォルダ内のファイルを参照
href="../page.html"親フォルダ内のファイルを参照
id="識別子"ページ内リンクの目印として要素に一意の識別子を付与
href="#識別子"ページ内リンク。対応要素までスクロール

　これで「リンクの作成」の応用機能が理解できました。用途に応じて適切に属性やパスを設定し、快適で分かりやすいナビゲーションを実装しましょう。