HTML/ハイパーリンク

出典: フリー教科書『ウィキブックス(Wikibooks)』
ナビゲーションに移動 検索に移動
HTML > HTML/ハイパーリンク

ハイパーリンクとは指定範囲のテキストまたは画像を他のページなどへリンクさせ、その部分を選択することでそのリンク先へ移動できるようにする要素。

通常は単にリンクと呼び、ハイパーリンクをつけることをリンクを張るという。Internet Explorerなど主要なブラウザでは、リンクを張ったテキストは、青い文字にアンダーラインをつけて表示される。

リンクをはるにはa要素(Anchorの略)を使う。

基本形[編集]

<a href="リンク先のURL">表示させたいURLまたはテキスト</a>

a要素で囲まれたテキストを選択すると、指定されたリンク先へ移動できる。テキストはリンク先の内容が何であるかを示す内容であるのが望ましく、「ここ」や「これ」などの指示代名詞を使うことは避けたほうがよい。なお、リンク先のURLに全角文字を含めた場合、処理体系の甘いブラウザでは製作者の意図したリンク先へと飛べないケースが存在するため、URLへの全角文字の使用は好ましくない。

画像での例[編集]

<a href="リンク先のURL"><img src="表示させたい画像のURL" alt="代替テキスト"></a>

代替テキストは画像が表示できない環境下で画像の代わりにテキストとして表示されるものであるためリンク先が何であるかを示す内容にすることが望ましい。画像にリンクを張った場合ブラウザによっては画像の周りに枠を表示するが、これを消す場合はborder="0"を指定したりスタイルシートを使用したりする。

ウェブページ以外へのリンク[編集]

ブラウザが直接処理できないタイプのファイルやプロトコルをリンク先に指定すると通常のリンクとは違う処理が行われ、ファイルの処理方法を確認する画面が出たり、別のアプリケーションが自動的にファイルを受け取ってリンク先を開いたりする形での対処が行われる。

例:メールアドレス(mailtoプロトコル)へのリンク

<a href="mailto:メールアドレス">表示させたいテキスト</a>
<a href="mailto:メールアドレス?subject=件名&amp;body=本文">表示させたいテキスト</a>

mailto:メールアドレスと指定するとメールアドレスへリンクを貼ることが出来、リンクをクリックするとブラウザ側で指定されたメールクライアントでそのアドレスへ宛てたメールを作成する画面が立ち上がる。

subject=でメールの件名、body=でメールの本文を指定できるが、全てのメールクライアントが正しく処理できるわけではないため注意しよう。

リンクターゲット[編集]

<a href="リンク先のURL" target="リンクターゲット">表示させたいURLまたはテキスト</a>

target属性を指定することでリンク先の開き方を設定できる。ただし強制的に新しいウィンドウを開くやり方はリンク先を同じウィンドウで開きたいユーザーにとって迷惑であり、全画面表示や音声ブラウザの利用者を困惑させることもあるため、積極的な利用は避けるべきである。

ターゲット名 概要
_blank 新しいウィンドウまたはタブでページを開く
_top フレーム内のページからリンクしたとき、フレームをすべて解除してページをウィンドウ全体に開く
_self フレーム内のページからリンクしたとき、リンク先ページをリンク元と同じフレームに開く
_parent フレーム内のページからリンクしたとき、リンク先ページをフレームを一段階解除してリンク元のフレームに開く
任意名 1回目は新しいウィンドウまたはタブで開かれるが、そのページを開いたまま同じターゲットのページを開くとすでに同じ名前で開かれたウィンドウまたはタブが上書きされる。フレームの場合、指定されたtargetと同じname属性を付与されたフレームがあればそのフレームを上書きしてリンク先を開く。

ラベル[編集]

<a name="任意のラベル名">ラベルを貼るテキスト</a>

a要素にname属性を指定するとそのページ内のその場所にラベルを指定することができる。ラベルを指定しておくとそのテキストや画像がある位置までジャンプできるようになる。これにより途中の内容を省略できるだけでなく、任意の場所にすばやく移動できるためページの内容が長い場合などに便利である。

<a href="#ラベル名">リンクを貼るテキスト</a>
<a href="リンク先#ラベル名">リンクを貼るテキスト</a>

ページ内でラベルを貼った位置に移動したい場合はa要素のhref属性に#ラベル名という属性値を指定、他のページ内にあるラベルへ移動したい場合はリンク先#ラベル名のように指定する。なお、ラベル名を全角文字列で指定するとブラウザによっては正しく機能しなくなるケースがあるので必ず半角文字列で記述するようにしよう。

なお、CSSを使用する場合Firefoxなどの一部のブラウザではhover擬似クラスの設定がラベルテキストに反映される。

ID属性を使ったラベルの指定[編集]

<span id="任意の名前">ラベルを貼るテキスト</span>

ラベルはid属性を使って指定することも出来る。id属性を使う場合、必ずしもa要素に対して記述する必要は無く、span要素などへ指定した場合でもラベルとして正しく機能する。

<a name="任意の名前" id="任意の名前">ラベルを貼るテキスト</a>

id属性は古いWWWブラウザが解釈できないため、a要素にnameとidの両方を指定する方法もある。この場合name属性とid属性には同じ値を指定する。

絶対パスと相対パスと絶対URL[編集]

絶対パスとは目的とするアドレスをルートディレクトリを基準として表す方法であり、相対パスとは現在表示しているページのアドレスなど特定のディレクトリを基準としてリンク先ファイルまでの相対的な位置関係を示す。絶対URLとはhttp://~から記述して表す方法である。外部のサーバーに対するリンクでは絶対URLを使用しなければならない。同じサーバー内のリンクに対しては相対パスと絶対パス、絶対URLのどれでも使用することが可能である。

例えば同じディレクトリ内にあるファイルを絶対パスや絶対URLでリンクさせた場合ディレクトリを移動したりディレクトリ名を変更したりするとリンクが機能しなくなるが、ここで相対パスを使用していた場合ファイルの位置関係が変わっていなければディレクトリに変更が加わってもリンクはそのまま機能し続ける。

<a href="メインページ">相対パス</a>
<a href="/wiki/メインページ">絶対パス</a>
<a href="http://ja.wikibooks.org/wiki/メインページ">絶対URL</a>
Wikipedia
ウィキペディアハイパーリンクの記事があります。