ハイパーリンク(Hyper Link)は、リンクが指定されているテキストや画像をクリックによって、別のWebページや別のファイルを表示する機能です。また、ハイパーリンクが指定されている文書をハイパーテキスト(Hyper Text)と言います。

他の文書へのリンク

a要素は、ハイパーリンクのリンク元やリンク先を定義するアンカー(Anchor)を指定する要素です。リンク先を指定する href属性の値に、リンク先のファイルや、WebページのURIを、相対URI、または絶対URIで指定します。

例)

<a href="index.htm">テキストAAAaaa</a>
<a href="http://homepagelecture.web.fc2.com/index.htm">テキストBBBbbb</a>


target属性

target属性は、href属性の値に指定したリンク先のウインドウの表示方法を指定します。

値)

例)

<a href="index.htm" target="_blank"></a>

※XHTML 1.0 の Strict文書型では、target属性が定義されていないので、文書にtarget属性を用いる場合は、Transitional文書型を選択して下さい。


リンクの枠を消す

画像ファイルにリンクを指定すると指定が無い限り枠線が表示されます。この枠線を消すにはimg要素にborder属性を記述し、値に「0」を指定します。

例)

<a href="img/img_0975.jpg"><img src="img/img_0975.jpg" alt="コスモス" width="225" height="150" style="border-style: none;" /></a>

コスモス

※代替指定
border属性はスタイルシートのborder-styleプロパティで代替指定する事が推奨されています。

例)

<a href="img/img_0975.jpg"><img src="img/img_0975.jpg" alt="コスモス" width="225" height="150" style="border-width: 0px;"></a>


リンクタイトル

title属性で、リンクの簡潔なタイトルを指定できます。リンクが指定されている箇所にマウスカーソルを合わせると、ポップアップでtitle属性で指定したタイトルが表示されます。また、音声出力環境でのブラウジングでは、補足情報として読み上げられます。

例)

<a href="index.htm" title="リンクの説明">リンク箇所</a>

リンク箇所


同じページの指定箇所にリンク

同じページ内の特定の見出しや段落などにid属性で任意の名前を付けます。

例)

<h2 id="cafe"></h2>

リンク先の指定はhref属性の値にシャープ( # )に続けてid属性で付けた名前(アンカー名)を指定します。

例)

<a href="#cafe"></a>


他のページの指定箇所にリンク

他のページの指定箇所にリンクする場合は、href属性の値に、他のページのURLに続けてシャープ( # )とアンカー名を指定します。

例)

文書名
example_page.htm
アンカー名
id="cosmos"

例)

<a href="example_page.htm#cosmos" target="_blank">コスモスの写真</a>
<a href="http://xxxxxxxxxxx.xxx.xxx.com/example_page.htm#cosmos" target="_blank">コスモスの写真</a>

コスモスの写真
コスモスの写真(通常のリンク)

メール

href属性の値にmailto:メールアドレスを指定します。ユーザーがリンクをクリックすると、あて先の欄が入力済みのメール送信用ブラウザが起動します。

例)

<a href="mailto:example@abc.xx.xx">メールリンク</a>

件名を入力済みにする場合
メールアドレスに続けて「?」を記述し、subject=件名を記述します。

<a href="mailto:example@abc.xx.xx?subject=件名">メールリンク</a>

本文を挿入する場合
メールアドレスに続けて「?」を記述し、body=本文を記述します。subject=件名 と body=本文両方を入力済みにする場合は、subjectとbodyを、アンド( & )で区切って記述します。

<a href="mailto:example@abc.xx.xx?body=本文">メールリンク</a>
<a href="mailto:example@abc.xx.xx?subject=件名&body=本文">メールリンク</a>


※掲載しているメールアドレスは架空のものです。
※ユーザーの環境によっては日本語の件名や本文が文字化けする場合があります。日本語が含まれる場合にはURLエンコードするか、入力済みはメールアドレスのみにすることをお勧めします。


ページトップへ戻る



RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system