HTML リンク

HTMLリンクはハイパーリンク（Hyperlinks）と呼ばれます。リンクをクリックすることで、別のドキュメントにジャンプすることができます。

マウスをリンクの上に置くと、マウスの矢印が小さな手に変わります。

1. リンクの構文 (Link Syntax)

HTMLの <a> タグは、ハイパーリンクを定義します。その構文は以下の通りです。

<a href="url">リンクテキスト</a>

最も重要な属性は href 属性で、これはリンク先の移動先（リンク先アドレス）を示します。

リンクテキストは、読者に見える部分です。リンクテキストをクリックすると、指定されたURLアドレスに移動します。

<a href="https://www.volardev.com/">Volardev.comにアクセス！</a>

デフォルトでは、リンクはすべてのブラウザで次のように表示されます。

• 未訪問のリンクは、下線付きの青色で表示されます。
• 訪問済みのリンクは、下線付きの紫色で表示されます。
• アクティブなリンク（クリックした瞬間）は、下線付きの赤色で表示されます。

[!TIP]
リンクのスタイルは、CSSを使用して自由に変更することが可能です。

2. target 属性 (The target Attribute)

デフォルトでは、リンクされたページは現在のブラウザウィンドウに表示されます。これを変更するには、リンクに target 属性を指定します。

target 属性には以下のいずれかの値を指定できます。

• _self - デフォルト。クリックしたのと同じウィンドウ/タブでドキュメントを開きます。
• _blank - 新しいウィンドウまたはタブでドキュメントを開きます。
• _parent - 親フレームでドキュメントを開きます。
• _top - ウィンドウの全画面でドキュメントを開きます。

<a href="https://www.volardev.com/" target="_blank">Volardevにアクセス（別タブで開く）</a>

3. 絶対URLと相対URL (Absolute URLs vs. Relative URLs)

上記の例では、href 属性に絶対URL（完全なWebアドレス）を使用していました。

ローカルリンク（同じWebサイト内のページへのリンク）は、相対URL（https://www. ~ の部分を除いた形式）で指定されます。

<h2>絶対URL</h2>
<p><a href="https://www.google.com/">Google</a></p>
<p><a href="https://www.volardev.com/">Volardev</a></p>

<h2>相対URL</h2>
<p><a href="html_images.asp">HTML画像について</a></p>
<p><a href="/css/default.asp">CSSチュートリアル</a></p>

4. 画像をリンクとして使用する (Use an Image as a Link)

画像をリンクとして使用するには、<a> タグの中に <img> タグを配置します。

<a href="default.asp">
  <img src="smiley.gif" alt="HTMLチュートリアルへ" style="width:42px;height:42px;">
</a>

5. メールアドレスへのリンク (Link to an Email Address)

href 属性の中に mailto: を使用すると、ユーザーのメールソフトを開くリンクを作成できます。

<a href="mailto:[email protected]">メールを送る</a>

6. ボタンをリンクとして使用する (Button as a Link)

HTMLボタンをリンクとして使用したい場合は、JavaScriptのコードを追加する必要があります。JavaScriptを使用すると、特定のイベント（ボタンのクリックなど）が発生したときに何が起こるかを指定できます。

<button onclick="document.location='default.asp'">HTMLチュートリアルへ</button>

7. リンクの title 属性 (Link Titles)

title 属性は、要素に関する追加情報を指定します。マウスを要素の上に置くと、その情報はツールチップとして表示されます。

<a href="https://www.volardev.com/html/" title="HTMLチュートリアルセクションへ">VolardevのHTMLセクションにアクセス</a>

8. まとめ