HTML のハイパーリンクとは何ですか?

HTMLのハイパーリンク：ウェブページをつなぐ魔法

ウェブサイトを閲覧していると、文字や画像をクリックすると他のページにジャンプすることがありますよね。これは「ハイパーリンク」によって実現されています。HTMLでは、タグを使ってハイパーリンクを定義します。

タグ：ハイパーリンクの主役

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

例えば、Googleのホームページへのリンクを作成する場合は、以下のようになります。

<a href="https://www.google.com/">Google</a>

このコードを実行すると、「Google」というテキストがリンクとして表示され、クリックするとGoogleのホームページにジャンプします。

href属性は、リンク先のURLを指定するために使用します。URLは、ウェブサイトのアドレスのようなもので、インターネット上のリソースを特定します。href属性には、以下の様なURLを指定できます。

URLの種類	説明	例
絶対URL	他のウェブサイトのページへのリンクに使用する。	`https://www.example.com/`
相対URL	同じウェブサイト内の別のページへのリンクに使用する。	`/contact.html`
メールアドレス	メールソフトが開かれ、指定したアドレス宛てのメール作成画面が表示される。	`mailto:[email protected]`
ファイルパス	ローカルファイルへのリンクに使用する。	`documents/report.pdf`

target属性は、リンクをクリックした際に、リンク先のページをどこに表示するかを指定します。主な値は以下の通りです。

値	説明
_blank	新しいウィンドウまたはタブでリンク先を開く。
_self	現在のウィンドウまたはタブでリンク先を開く（デフォルト）。
_parent	親フレームにリンク先を開く。フレームを使用していない場合は_selfと同じ動作。
_top	最上位のフレームにリンク先を開く。フレームを使用していない場合は_selfと同じ動作。

例えば、新しいタブでリンク先を開きたい場合は、以下のように記述します。

<a href="https://www.example.com/" target="_blank">新しいタブで開く</a>

A1: JavaScriptを使用して、クリックイベントを無効化する方法があります。ただし、アクセシビリティの観点からは、ユーザーがクリックできないようにするよりも、リンク先で適切な情報を提供することが重要です。

A2: はい、CSSを使用して変更できます。例えば、リンクの色を赤に変更するには、以下のようなCSSを記述します。


a {
  color: red;
}

<a href="https://www.example.com/">
  <img src="image.jpg" alt="説明文">
</a>