Webサイトって、いろんなページに移動できますよね。あれってどうやって作るんですか？
それは「リンク」という仕組みのおかげなんだ。リンクはWebの最も重要な特徴の一つで、異なるページや情報を繋げてくれるんだよ。
確かに、普段何気なくクリックしてページを移動してますが、それがどうやって作られているか考えたことありませんでした。
今日は、HTMLでリンクを作るための<a>タグについて詳しく学んでいこう。これを覚えれば、自分のWebサイトで他のページへの移動を自由に作れるようになるよ。
aタグの基本構造
HTMLでリンクを作るには、<a>（anchor：錨）タグを使用します。このタグは、ユーザーが他のページや同じページ内の別の場所に移動できるようにします。
HTMLタグ
ファイルパスを指定
文字部分
基本構造のポイント
- 開始タグ
<a>リンクの始まりを宣言し、href属性でリンク先を指定 - href属性 “Hypertext Reference”の略で、リンクの行き先を示す最重要属性
- リンクテキスト ユーザーが目にする部分で、クリック先の内容を表現する
- 終了タグ
</a>リンク範囲の終わりを示し、必ず開始タグとペアで使用
実際にリンクを作ってみよう
理論だけでなく、実際にコードを書いて動作を確認してみましょう。以下のエディターでリンクの基本的な書き方を試してみてください。
<a>タグの基本はhref属性とリンクテキストですが、実は他にも様々な「属性」を追加して、リンクの動作や意味を拡張できます。
<a href="リンク先のURL" その他の属性>リンクテキスト</a>| その他の属性 | 役割・説明 |
|---|---|
target | リンクを新しいタブで開くかなどを指定します。 |
title | リンクの補足情報を設定し、マウスオーバーで表示させます。 |
rel | リンク先ページとの関係性を示します。（セキュリティ対策などで重要です） |
download | リンク先のファイルをダウンロードさせます。 |
これらの属性は次のレッスンで学びます。最初はhref属性だけをしっかり覚えれば大丈夫です。一つずつ着実に学んでいきましょう。
href属性の基本的な値
href（Hypertext Reference）属性は、リンク先を指定する最も重要な属性です。基本的な値のパターンを理解しましょう。
外部サイトへのリンク
完全なURL（https://から始まる）を指定して、他のWebサイトにリンクします。
<a href="https://www.google.com">Google</a>
<a href="https://www.github.com">GitHub</a>
<a href="https://developer.mozilla.org">MDN Web Docs</a>同一サイト内のページへのリンク
相対パスを使って、同じサイト内の他のページにリンクします。ファイル名のみを指定する方法です。
<a href="about.html">私について</a>
<a href="contact.html">お問い合わせ</a>
<a href="blog.html">ブログ</a>トップページへ戻るリンク
ルートパス（/から始まる）を使って、サイトのトップページにリンクします。
<a href="/">ホーム</a>ページ内移動のリンク
フラグメント（#から始まる）を使って、同じページ内の特定の場所にジャンプします。これは長いページで「目次」のような機能を作るときによく使われます。
仕組み
- ジャンプ先の要素に
id属性を付ける - リンクのhref属性に
#id名を指定する - リンクをクリックすると、その要素まで自動スクロール
<!-- ジャンプ先の要素（id属性が必要） -->
<h2 id="section1">第1章 HTMLの基礎</h2>
<div id="top">ページの先頭</div>
<form id="contact-form">...</form>
<!-- リンク部分（クリックする箇所） -->
<a href="#section1">第1章へ</a>
<a href="#top">ページの先頭へ</a>
<a href="#contact-form">お問い合わせフォームへ</a>
id属性って何ですか？リンクと関係があるんですか？
id属性は、HTML要素に「名札」を付けるようなものなんだ。ページ内リンクはこの「名札」を目印にして、その場所にジャンプするんだよ。
使い方の例
- 長い記事の目次
- 「ページの先頭へ戻る」ボタン
- FAQ（よくある質問）の質問一覧から回答への移動
実践：様々なリンクを作ってみよう
理論だけでなく、実際に手を動かして様々なタイプのリンクを作成してみましょう。以下のエディターで、学んだすべてのリンクパターンを試してみてください。
このエディターで、実際に様々なリンクがどのように動作するか確認してみよう。特に、ページ内移動のリンクをクリックすると、実際にその要素まで自動的にスクロールすることを体験できるよ。
実際に動かしてみると、リンクの仕組みがよく分かりますね！ページ内移動が本当に機能していて驚きました。
分かりやすいリンクテキストの書き方
リンクテキストは、ユーザーがクリック先の内容を予測できるように書くことが重要です。
リンクを作る時、文字の部分はどんなことに気をつけて書けばいいんですか？
リンクテキストは、ユーザーがクリック先で何が見つかるかを明確に示すことが大切なんだ。
リンクテキストの例
クリック先の内容が明確にわかるリンクテキストの例です。
<a href="contact.html">お問い合わせフォーム</a><a href="profile.pdf">履歴書をダウンロード（PDF、500KB）</a><a href="https://github.com">GitHubの公式サイト</a>内容が曖昧でユーザーを困惑させるリンクテキストの例です。
<a href="contact.html">こちら</a><a href="profile.pdf">クリック</a><a href="https://github.com">https://github.com</a>リンクテキストのベストプラクティス
- 具体的な説明 リンク先の内容や目的を明確に示す
- 簡潔で分かりやすい 長すぎず、短すぎず、適切な長さを保つ
- アクションを示す 「ダウンロード」「詳細を見る」など、何が起こるかを示す
- ファイル情報 PDFや画像などのファイルにはファイル形式とサイズを記載
- 外部サイト表示 外部サイトへのリンクであることを明示する
理解度チェッククイズ
リンクの基本について理解できたか、クイズで確認してみよう！
リンク基本知識クイズ
まとめ
aタグって思ったよりも奥が深いんですね！ただリンクを作るだけじゃなくて、ユーザーのことを考えた書き方が大切なんだ。
その通り！リンクはWebの基盤となる重要な要素だから、適切に作ることでユーザーにとって使いやすいサイトになるんだ。
リンクテキストの書き方一つで、ユーザーの使いやすさが大きく変わるんですね。
次回は、今日学んだリンクの知識をさらに発展させて、target属性やメールリンクなど、様々なリンクの種類について学んでいこう。
- aタグとhref属性 HTMLリンクの基本構造を正しく理解する
- 適切なパス指定 相対パス、ルートパス、完全URLを目的に応じて使い分ける
- 分かりやすいリンクテキスト ユーザーがクリック先を予測できる説明的な文章を使用
- ページ内リンク id属性と#フラグメントで同一ページ内の移動を実現
- ユーザビリティ重視 常にユーザーの使いやすさを最優先に考える
次回は、リンクの開き方を制御するtarget属性や、メール・電話などの特殊なリンクについて学び、より実用的なWebサイト作成を目指します。