【6日でできるHTML＆CSS入門】ハイパーリンクの記述

―“クリックで移動”を実現するハイパーリンクの世界―
　Web の魅力のひとつは、ページ ⇄ ページ を瞬時に飛び回れることです。その跳躍点を作るのが <a> タグ―通称 ハイパーリンク。ここでは「リンクとは何か」から始め、外部サイト・同一サイト内・ファイルダウンロード・メール送信など多彩な遷移先の指定方法を体系的に解説します。

１．ハイパーリンクの基本

1.1. <a> タグの役割

<a> は anchor（錨：イカリ）の略で、クリック可能な範囲を定義します。

1.2. href 属性で行き先を示す

  • 絶対 URL： https:// で始まる完全なアドレス
  • 相対パス： 同じフォルダなら ファイル名.html だけでも可

1.3. target 属性で開き方を制御

値動作代表的な用途
_self同じタブ（既定値）サイト内ページ遷移
_blank新しいタブ外部リンク・PDF 等

２．リンク先いろいろ

2.1. 外部サイトへのリンク

<a href="https://www.study-pg.com/" target="_blank">演習で学ぶプログラミングへ</a>

2.2. サイト内・フォルダ内リンク

<a href="lesson13_1.html">ハイパーリンクのサンプルページ</a>

2.3. ページ内ジャンプ（アンカー）

<p><a href="#faq">よくある質問へ移動</a></p>
…
<h2 id="faq">よくある質問</h2>

2.4. ダウンロードリンク & メールリンク

<a href="docs/guide.pdf" download>操作ガイド (PDF)</a>
<a href="mailto:info@example.com?subject=お問い合わせ">メールを送る</a>

３．アクセシビリティ & SEO のポイント

3.1. title 属性で文脈を補足

<a href="news.html" title="最新のお知らせページ">お知らせ</a>

3.2. rel 属性で関係性を明示

値意味主な活用例
noopener noreferrer新規タブ時のセキュリティ向上target="_blank" と併用
external外部サイトアクセシビリティ向上
nofollowSEO クローラに「評価しないで」と通知広告リンク

４．セキュリティ上の注意

4.1. target="_blank" の落とし穴

　別タブに開く際は rel="noopener noreferrer" を忘れずに。開いた先のページから元ページを操作されるリスクを防ぎます。

５．実践サンプル集

5.1. ファイル名：lesson13_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>基本リンク例</title>
</head>
<body>
  <h1>リンクの基本</h1>
  <p>外部サイト: <a href="https://ja.wikipedia.org/" target="_blank" rel="noopener">ウィキペディア</a></p>
  <p>内部ページ: <a href="lesson12_1.html">好きなフルーツ</a></p>
</body>
</html>

表示結果

  • 「ウィキペディア」をクリック → 新しいタブで Wikipedia
  • 「好きなフルーツへ」をクリック → 同タブで lesson12_1.html

5.2. ファイル名：lesson13_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アンカーリンク例</title>
</head>
<body>
  <h1>ページ内ジャンプ</h1>
  <p><a href="#goal">ゴールセクションへ進む</a></p>
  <p style="height: 500px;">（ここに長文コンテンツ）</p>
  <h2 id="goal">ゴール</h2>
  <p>お疲れさまでした！</p>
</body>
</html>

表示結果

クリックで一気に「ゴール」見出しへスクロール。

5.3. ファイル名：lesson13_3.html

　事前に「lesson13_3.html」を配置したフォルダーと同じ場所に「files」フォルダーを作成しておき、その中に「summary.pdf」を保存しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ダウンロード & メール</title>
</head>
<body>
  <h1>資料ダウンロードとお問い合わせ</h1>
  <p><a href="files/summary.pdf" download>概要資料 (PDF) を保存</a></p>
  <p><a href="mailto:support@example.com?subject=サポート依頼">サポートにメール</a></p>
</body>
</html>

表示結果

  • PDF はブラウザ依存で直接表示かダウンロード
  • メールリンクは標準メーラーが起動し件名を自動入力

使用タグ・属性一覧

要素 / 属性目的補足説明
<a>クリック可能なハイパーリンクを定義開始・終了タグ必須
href移動先 URL やファイル相対・絶対・mailto:・tel: など
target表示先ウィンドウ / フレーム_self, _blank, カスタムフレーム名
downloadダウンロードさせるファイル名を省略可
title補足情報ツールチップアクセシビリティ向上
relリンク先との関係noopener, noreferrer, nofollow, external など
idアンカー（ページ内リンク先）値は一意

まとめ

  • リンクの核は <a href="…">。href に絶対 URL・相対パス・スキーム付き URI を指定。
  • target と rel の組み合わせで UX とセキュリティを両立。
  • ダウンロード用 download、メール用 mailto:、ページ内ジャンプ用 #id を覚えると応用範囲が一気に広がる。

　これらを押さえれば、ナビゲーションバーからファイル配布サイトまで、あらゆるリンク設計を自信を持って実装できます。