リンク

Home>HTML>リンク

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

リンクとは、HTML文書とHTML文書を関連付けるしくみのことで、リンクによって別の著者が書いた関連情報を得られることが、HTML文書の大きな特長の一つです。

リンクを設定するにはa要素（anchor＝アンカー（錨）のaです）を使います。

通常のテキストリンク

<a href="http://www.yahoo.co.jp/">Yahoo!Japan</a>

a要素はアンカー（錨）と呼ばれます。
href属性に、参照したいURLを指定して、閉じるタグ（</a>）を設置するところまでにリンクを設定します。上記を実際のブラウザで見ると、以下のようになります。

Yahoo!Japan

クリックするとYahoo!Japanのウェブサイトが開きます。

画像へのリンク

<a>～</a>の間にimg要素を使って画像をはさむことで、画像にリンクを設定することができます。
a要素に内包されたimg要素は、デフォルトで青い枠線が表示されます。これを消すためには、img要素において、border属性に0を指定します（border="0"）が、border属性は被推奨なので、style属性により、style="border:none"という設定をします。

別ウィンドウを開く（ターゲットを指定したリンク）

アンカーテキスト（又は画像）をクリックしたときに、通常ならば現在開いているページが、リンク先のページに変更されます。
このとき、target属性を使うと、リンク先を開く場所を新しいウィンドウにしたり、フレームを使用している場合には、別のフレームに表示させるという指定ができます。

<a href="http://www.google.co.jp" target="_blank">Google</a>

上記は、Googleというアンカーテキストをクリックすると、別ウィンドウでGoogleのウェブサイトを開きます。
上記のソースをブラウザで見ると、以下のようになります。

Google

なお、target属性の_blank（別ウィンドウで開く）は、あまりお薦めできません。リンク先を同一ページに開くか、別ウィンドウで開くかは、ユーザの選択に任せ、強制的に別ウィンドウを開くように設定するのは、ユーザの利便性が下がる場合があるからです。

target属性に指定する値 効果
_parent 親フレームに表示。親フレームがなければ_selfと同じ効果になる。
_top フレーム分割を解除してウィンドウ全体に表示。
_self 現在のフレームに表示。
_blank 新しいウィンドウを開いた後にそこに表示。
フレーム名 指定した名前のついたフレームに表示。

アンカーポイントとページ内リンク

ページ内リンクとは、同じページの中の任意の場所にリンクを設定することです。
アンカーポイントは、ページ内リンクでジャンプするときの終点を示します。

<a name="normal_text"></a>

アンカーポイントを設定するときは、href属性は使いません。代わりにname属性を用いて、その箇所に名前をつけます。ただし、name属性は非推奨なので、id属性を使ったほうがいいでしょう。

<a id="normal_text"></a>

そして、このアンカーポイントにリンクを貼る場合には、以下のように指定します。

<a href="#normal_text">アンカーポイントにジャンプ</a>

#の後に、アンカーポイントの名前を記述します。
このページの「通常のテキストリンク」にアンカーポイントを設定しました。以下のリンクをクリックすると、その部分までジャンプします。

アンカーポイントにジャンプ

URLの後に#を付けてアンカーポイント名を書けば、別のページの特定の場所にジャンプさせることもできます。

メーラーを起動する

メーラーを起動して新規メール作成ウィンドウを開く

<a href="mailto:メールアドレス">メールを送る</a>

href属性にmailto:と書いた後にメールアドレスを書くと、アンカーポイントをクリックしたときに、メーラーが起動して、書いたメールアドレスに宛てた、新規メールの編集画面が開きます。

メールを送る

既に件名、本文が入力された状態で新規メール作成ウィンドウを開く

<a href="mailto:メールアドレス?subject=件名&cc=メールアドレス2&bcc=メールアドレス3&body=本文">内容つきメールを送る</a>

href属性の後に、mailto:メールアドレスと記述して、?の後にsubject等のパラメータを指定すると、メールの件名や本文を予め指定できます。
パラメータ同士は、最初の「?」以降は「&」で区切ります。

パラメータ 記述する内容
subject メールの件名
body メールの本文
cc CCで送信するメールアドレス（半角カンマで複数指定可能）
bcc BCCで送信するメールアドレス（半角カンマで複数指定可能）

※CCとは、カーボンコピーの略で、送信された全員が自分のほかに送信された人のメールアドレスを見れる。BCCとは、ブラインドカーボンコピーの略で、送信された人は自分以外に送られた人がわかりません。

内容つきメールを送る

上記のリンクは、内容、件名、本文、CC、BCCが設定された状態で新規メール編集画面を開きます。
※文字化けする場合は、UTF8対応のメーラーで確認してください）

なお、本文に改行等の特殊文字を使用する場合には、以下のように書きます。

目的 表記方法
改行 %0D%0A
半角スペース %20
半角クエスチョンマーク %3F

指定範囲にリンクを設定する

CSSを使って、リンクの範囲をブロックレベルにしたり、任意の範囲に指定することができます。

a{
display:block;
}

上記のCSSで、a要素をブロックレベルに設定します。

<a href="URL">ブロックレベルのリンク</a>

HTMLソースでは、通常のリンクを設定します。すると、アンカーテキストの書いてある部分を越えて、その行全体にリンクが設定されます。

ブロックレベルのリンク

また、ブロックレベルに指定しているときに、幅や高さを指定すると、その範囲のみにリンクを設定できます。

a{
display:block;
width:200px;
height:100px;
}

display:blockのほかに、横幅と高さを指定します。

<a href="URL">範囲を指定したリンク</a>

HTMLソースは上記のように指定するだけです（a要素に直接style属性を使ってCSSを指定する場合は、<a href="URL" style="display:block;width:200px;height:100px">とします。

範囲を指定したリンク

クリッカブルマップ

クリッカブルマップとは、画像の一部にリンクを設定する方法です。
画像全体ではなく、画像内の任意の場所に設定できるのが特徴です。また、一箇所だけでなく同じ画像の複数箇所に設定することもできます。

クリッカブルマップをつくる場合は、img要素、map要素、area要素の3つを使います。

<img src="URL" usemap="#マップ名">
<map name="マップ名" id="マップ名">
<area shape="形" coords="座標" href="リンク先">
</map>

img要素ではクリッカブルマップにつかう画像を表示します。usemap属性で、map要素につける名前を指定します。
map要素内に書かれたものは、すべて同じ画像に設定する内容とみなされます。
map要素内には、area要素を配置します。area要素は、円形、四角形、多角形を指定できます。

shape 意味・使い方
rect 四角形。coords="左上X座標, 左上Y座標, 右下X座標, 右下Y座標"
circle 円形。coords="中心X座標, 中心Y座標, 半径"
poly 多角形。coords="頂点1X座標, 頂点1Y座標, 頂点2X座標, 頂点2Y座標, ・・・"

リンクの見た目（動作）を変更する

body要素に指定する方法とCSSで指定する方法があります。

body要素に指定する方法

body要素に以下の属性を設定すると、リンクの色を変更することができます。

属性 効果
link リンク先が未訪問の場合（未キャッシュ）の色
vlink リンク先が既訪問の場合（既キャッシュ）の色
alink マウスボタンをクリックしたときのリンクの色

body要素に記述する方法は、推奨できません。この方法よりもCSSで指定した方が、HTMLソースがすっきりすることに加えて、細かく設定できます。

CSSで指定する方法

CSSで設定すると、アンカーテキストの色だけではなく、フォントの大きさや枠線の有無など、細かく設定できます。
また、アンカーテキストの上にマウスカーソルをのせたときに効果を与えることもできます。

属性 効果
a:link リンク先が未訪問の場合（未キャッシュ）
a:visited リンク先が既訪問の場合（既キャッシュ）
a:active マウスボタンをクリックしたとき
a:hover マウスオーバーしたとき

CSSに上記の設定をすることで、a属性の動作を指定できます。

a:link{
font-size:100%;
color:#006600;
}
a:hover{
font-size:120%;
color:#ff0000;
}

<a href="URL">CSSでリンクを設定</a>

→CSSでリンクを設定したサンプル

上記の設定では、通常のリンクは緑色、マウスカーソルがテキストの上にのると赤色になり、フォントの大きさが20％大きくなります。

関連リンク

よく読まれている記事

UpDate:2009-12-3