HTMLリンク
リンク（ハイパーリンク）はウェブページをつなぐ糸です ― リンクがなければ、インターネットは「ウェブ」ではありません。<a> タグを使うと、ページ間の移動、ページ内の特定セクションへのジャンプ、ファイルのダウンロード、メールの送信ができます。
基本的なリンク構文
リンクは <a> タグ（アンカー）で定義され、href 属性（ハイパーテキスト参照）が移動先アドレスを指定します。
サンプル
HTML
<a href="https://www.example.com">サンプルサイトを訪問</a>
上のコードはブラウザでクリック可能なテキスト「サンプルサイトを訪問」として表示され、デフォルトでは青色の下線付きテキストでスタイリングされます。クリックすると、ブラウザは href で指定されたURLに移動します。
💡 ヒント：リンクテキストは、クリック後に何が起こるかをユーザーに明確に伝える必要があります。例えば、「ここをクリック」よりも「完全なユーザーガイドを見る」の方が ― ユーザーの判断が容易で、検索エンジンにも優しいです。
開き方：target属性
デフォルトでは、リンクは現在のページで開きます（置き換える）。target 属性を使うと、新しいタブやウィンドウで開くことができます。
サンプル
HTML
<a href="https://www.example.com" target="_blank">新しいタブで開く</a>
<a href="/html/index.html" target="_self">現在のページで開く（デフォルト）</a>
よく使われる target の値：
_self：デフォルト ― 現在のページで開く_blank：新しいタブまたはウィンドウで開く_parent：親フレームで開く（iframe環境で使用）_top：フルウィンドウで開く（すべてのフレームを解除）
⚠️ セキュリティノート：
target="_blank" を使用する場合は、リンクに rel="noopener" または rel="noreferrer" を追加することを推奨します。これにより、新しいページが window.opener 経由で元のページのオブジェクトにアクセスするのを防ぎ、セキュリティリスクを回避できます：<a href="..." target="_blank" rel="noopener">リンク</a>。
絶対パスと相対パス
リンクの移動先は絶対パスまたは相対パスで指定できます。違いは簡単です ― 絶対パスは完全なURLを含み、相対パスは現在のページからの相対位置を指定します。
サンプル
HTML
<!-- 絶対パス：完全なURL -->
<a href="https://www.google.com">Googleにアクセス</a>
<!-- 相対パス：現在のファイルからの相対位置 -->
<a href="basics.html">HTMLの基本</a>
<!-- 相対パス：親ディレクトリ -->
<a href="../index.html">ホームに戻る</a>
- 絶対パス： プロトコル（
https://）で始まり、外部URLまたは完全な内部URLを指す - 相対パス： ファイル名または
./、../で始まり、現在のファイルからの相対位置を指す - ルートパス：
/で始まり、サイトのルートディレクトリから位置を特定する（例：/html/index.html）
アンカーリンク：ページ内ジャンプ
アンカーリンクを使うと、同じページ内の特定セクションに直接ジャンプできます ― 長いページの「トップに戻る」や目次ナビゲーションに最適です。2つのステップだけです：ターゲット要素に id を割り当て、#id でリンクします。
サンプル
HTML
<!-- 目次 -->
<a href="#section-intro">はじめににジャンプ</a>
<a href="#section-details">詳細にジャンプ</a>
<!-- ターゲットセクション（ジャンプを視覚化するために高さを設定） -->
<h2 id="section-intro">はじめに</h2>
<p style="min-height:600px;background:#f0f0f0;">はじめにの内容...</p>
<h2 id="section-details">詳細</h2>
<p style="min-height:600px;background:#f0f0f0;">詳細情報...</p>
アンカーはページをまたがるジャンプもサポートします ― リンクにページとアンカーの両方を指定するだけです（例：<a href="basics.html#section-head">ヘッダー構造を見る</a>）。ブラウザはそのページを開き、指定された位置に自動的にスクロールします。
画像リンクとその他の使い方
リンクはテキストだけに限りません ― <a> タグの中に <img> タグを入れると、画像がクリック可能になります。<a> タグはファイルのダウンロードやメール送信にも使えます。
サンプル
HTML
<!-- 画像リンク -->
<a href="https://www.example.com">
<img src="/assets/images/tutorials/html-banner-example.webp" alt="詳細はこちら">
</a>
<!-- ダウンロードリンク -->
<a href="document.pdf" download>PDFドキュメントをダウンロード</a>
<!-- メールリンク -->
<a href="mailto:support@example.com">メールを送信</a>
- 画像リンク： 画像をクリックして移動。
altテキストはアクセシビリティにとって重要 - ダウンロードリンク：
download属性を追加すると、ブラウザがファイルを開かずにダウンロードする - メールリンク：
mailto:プロトコルを使うと、システムのデフォルトメールクライアントが開く
📌 注意：
<a> タグにはよく使われる title 属性もあり、ホバー時にツールチップテキストを表示します：<a href="..." title="完全なチュートリアルを見る">HTMLチュートリアル</a>。このツールチップはスクリーンリーダーなどの支援技術にも優しいです。
❓ よくある質問
Q
target="_blank"を使うときにrel="noopener"を追加する必要があるのはなぜですか？A これはセキュリティ対策です。リンクが
target="_blank"で新しいタブで開くと、新しいページはwindow.openerを介して元のページのwindowオブジェクトにアクセスできるようになり、悪意のあるページがコンテンツを改ざんしたり、フィッシング攻撃を行ったりする可能性があります。rel="noopener"を追加すると、このアクセスが切断され、ページが保護されます。すべてのtarget="_blank"リンクにrel="noopener"またはrel="noreferrer"を追加することをお勧めします。Q 絶対パスと相対パスの違いは何ですか？いつ使うのですか？
A 絶対パスは完全なURL（
https://example.com/page.htmlなど）を含み、外部リソースや明示的なドメイン指定が必要な場合に使用します。相対パスは現在のファイルからの位置（./about.htmlや../index.htmlなど）を使用し、同じサイト内のナビゲーションに使用します。ルートパス（/html/index.htmlなど）はサイトのルートディレクトリから開始し、大規模なウェブサイトに適しています。基本ルール：内部リンクには相対パス、外部リンクには絶対パスを使います。Q アンカーリンクが機能しません。何を確認すべきですか？
A 一般的な原因：1）ターゲット要素に
id属性がない；2）id値のスペルミス（大文字小文字を区別）；3）idがページ内で一意でない（ブラウザは最初のマッチにジャンプ）；4）ターゲット要素がdisplay:noneで非表示になっている。デバッグ方法：ブラウザのコンソールでdocument.getElementById("yourId")と入力し、nullを返す場合はidが存在しません。📖 まとめ
- リンクは
<a>タグを使用。href属性で移動先を指定 target="_blank"は新しいタブで開く ―rel="noopener"と組み合わせることを推奨- 絶対パスは完全なURL。相対パスは現在のファイルの位置に基づく
- アンカーリンクは
#idを使ってページ内ジャンプ。ページをまたぐことも可能 <a>内に<img>を入れると画像リンクに。downloadでダウンロード、mailto:でメール送信
📝 練習問題
- リンクを作成する：
https://www.google.comへのリンクを、新しいタブで開くように書き、リンクテキストは「Googleで検索」としてください。 - アンカーナビゲーション： ページの下部に「トップに戻る」リンクを作成し、ページ上部を指すようにしてください（ヒント：
<body>にidを追加するか、最上位要素と一緒に#を使用）。 - 自己レビュー： 自分が書いたページのソースコードを見て、すべての
<a>タグを見つけ、それらのhref属性とtarget属性がどのように設定されているか調べてください ― 各リンクがどこで開くかわかりますか？