ハイパーリンクとは？仕組みや注意点などをわかりやすく解説

ハイパーリンクは、参照先の情報とその場所を示す情報で構成される。参照先の情報は、URL（Uniform Resource Locator）と呼ばれる識別子によって指定される。URLには、Webページ、画像、動画、ファイルなど、様々な情報資源を識別するための情報が含まれている。

ハイパーリンクは、アンカーテキストと呼ばれる文字列や画像によって表現される。アンカーテキストは、ユーザーがクリックすることで参照先の情報にアクセスできる。

アンカーテキスト

アンカーテキストは、ハイパーリンクをクリックした際に表示される文字列である。アンカーテキストは、参照先の情報の内容を正確に反映する必要がある。

例えば、「Google 検索」というアンカーテキストをクリックした場合は、Google 検索のWebページが表示される。

URL

URLは、参照先の情報が格納されている場所を示す情報である。URLは、以下の要素で構成される。

• プロトコル: 情報資源の種類を示す。Webページの場合は「http」または「https」、画像の場合は「http」または「https」、メールの場合は「mailto」など
• ホスト名: 情報資源が格納されているサーバーの名前
• ポート番号: 情報資源が格納されているポート番号
• パス: 情報資源の場所を示すパス
• クエリ: 情報資源に渡されるパラメータ

例えば、以下のURLは、Google 検索のWebページを示す。

https://www.google.com/search?q=ハイパーリンク

• プロトコル: https
• ホスト名: www.google.com
• ポート番号: 443
• パス: /search
• クエリ: q=ハイパーリンク

リンクの処理

ハイパーリンクをクリックすると、以下の処理が行われる。

1. ブラウザは、アンカーテキストに含まれるURLを取得する。
2. ブラウザは、URLを基に参照先の情報資源を取得する。
3. ブラウザは、取得した情報資源を表示する。

ハイパーリンクは、様々な方法で表現することができる。以下に、代表的なハイパーリンクの種類と特徴を説明する。

テキストリンク

テキストリンクは、アンカーテキストとして文字列を用いたハイパーリンクである。最も一般的なハイパーリンクである。

テキストリンクは、以下のように記述する。

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

上記の場合、「Google 検索」という文字列がアンカーテキストとなり、クリックすると Google 検索のWebページが表示される。

画像リンク

画像リンクは、アンカーテキストとして画像を用いたハイパーリンクである。画像をクリックすることで参照先の情報にアクセスできる。

画像リンクは、以下のように記述する。

<a href="https://www.google.com/"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google 検索"></a>

上記の場合、Google ロゴの画像がアンカーテキストとなり、クリックすると Google 検索のWebページが表示される。

ボタンリンク

ボタンリンクは、アンカーテキストとしてボタンを用いたハイパーリンクである。ボタンをクリックすることで参照先の情報にアクセスできる。

ボタンリンクは、以下のように記述する。

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

上記の場合、「Google 検索」という文字列が書かれたボタンがアンカーテキストとなり、クリックすると Google 検索のWebページが表示される。

ハイパーリンクのオプション

また、ハイパーリンクには、さまざまなオプションを設定することができる。

1. 表示テキスト

ハイパーリンクをクリックしたときに表示されるテキストである。デフォルトでは、リンク先のファイル名またはURLが表示される。

2. ターゲットフレーム

ハイパーリンクをクリックしたときに、リンク先が開くフレームを指定する。

• _self: 現在のフレームで開く
• _blank: 新しいウィンドウで開く
• _parent: 親フレームで開く
• _top: 最上位のフレームで開く

3. ツールヒント

ハイパーリンクの上にマウスポインターを置いたときに表示されるテキストである。リンク先の説明などを記述する。

4. アクセスキー

キーボード操作でハイパーリンクを選択できるようにする。

5. スタイル

ハイパーリンクの色、太字、下線などのスタイルを設定する。

6. ダウンロード

リンク先ファイルをダウンロードするように設定する。

7. ブックマーク

ハイパーリンクをブックマークに追加する。

8. アンカー

文書内の特定の場所へのリンクを作成する。

これらのオプションは、ハイパーリンクをより便利で分かりやすくするために使用することができる。

例

以下は、ハイパーリンクのオプション設定の例である。

<a href="https://www.google.com/" target="_blank" title="Google検索">Google</a>

表示テキスト: “Google”

ターゲットフレーム: “_blank”

ツールヒント: “Google検索”

スタイル: 色: 青、太字

このコードをWebページに埋め込むと、”Google”というテキストが表示され、クリックすると新しいウィンドウでGoogle検索が開く。

ハイパーリンクを設定する際には、以下の点に注意する必要がある。

アンカーテキストの適切性

アンカーテキストは、参照先の情報の内容を正確に反映する必要がある。誤解を招くようなアンカーテキストを設定すると、ユーザーが目的の情報にたどり着けない可能性がある。

例えば、「最新情報」というアンカーテキストをクリックした際に、古い情報が表示される場合は、ユーザーの信頼を失うことになる。

リンク切れの防止

参照先の情報が移動や削除された場合、リンク切れが発生する。リンク切れは、ユーザーの利便性を損なうだけでなく、サイトの評価を下げる可能性もある。

リンク切れを防ぐためには、定期的にリンクの確認を行う必要がある。手動で確認する以外にも、リンクチェッカーと呼ばれるツールを用いて自動的に確認することもできる。

アクセシビリティ

視覚障碍者など、様々なユーザーが利用できるように、ハイパーリンクを設定する必要がある。

例えば、画像リンクには代替テキストを設定することで、視覚障碍者が画像の内容を理解できるようにする。

その他の注意点

• 過剰なハイパーリンクの使用: ページにハイパーリンクが多すぎると、ユーザーが混乱し、必要な情報にたどり着きにくくなる可能性がある。
• SEO対策: 検索エンジン最適化 (SEO) の観点から、適切なアンカーテキストを設定することが重要である。
• セキュリティ: 悪意のあるリンクを設置することで、ユーザーの情報を盗み取ったり、コンピュータにウイルスを感染させたりする可能性がある。