超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ リンクを張る

タグ名プロパティ説明
<a>〜</a>hrefURLリンク先を指定
#マーカー名同一ページの他の場所を指定
URL#マーカー名他のページの場所を指定
mailto;メールアドレスメール送信
nameマーカー名リンク先の場所に名前を付ける
target_self同一ウィンドウ(デフォルト)
_blank新しいウィンドウを開く

他のページにリンクを張るには <a href="リンク先 URL "></a> を使います。前ページの表にも書いてますね。URL はリンク先によって、絶対パスまたは相対パスで記述します。
ここから、トップページへリンクを張ってみます。

<p>
(絶対パスで記述)
<a href="http://park16.wakwak.com/~html-css/index.html">トップへ戻る</a>
</p>
<p>
(相対パスで記述)
<a href="../index.html">トップへ戻る</a>
</p>

(絶対パスで記述) ★トップへ戻る

(相対パスで記述) ★トップへ戻る

もちろん画像を使ったリンクもできます。
<a href="リンク先 URL "> と </a> の間に <img src="イメージファイル URL "> を記述すればいいですね。

<p>
<a href="../index.html">
<img src="nekobanner.gif" width="88" height="77" border="0" alt="トップに戻るよ">
<br>
</a>
</p>

トップに戻るよ


◆同一ページ内で他の場所へジャンプ

ページが長く、ずっと下の方にスクロールしなければ読めない場合などは、同一ページ内でジャンプできると便利です。
ページ内のある特定の場所を指定するには、<a> タグの name 属性を使います。
name 属性を使って、ジャンプしたい場所に印(マーク)を付けておき、href 属性で、そこにジャンプするように指定します。
name 属性の値であるマーカー名は適当にわかりやすい名前を付けて下さい。
また、href 属性でマーカー名を記述するときに、# を忘れないようにしましょう。

では、このページの一番上に戻ってみましょう。
ページの一番上となる <body> タグの下に、name 属性を使って名前をつけます。

<body>
<a name="atama"></a>
   (省略)
<p>
<a href="#atama">★このページの一番上にジャンプ!</a>
</p>

★このページの一番上にジャンプ!

上の例では <a name="atama"> と </a> の間に何も記述していませんが、間にテキストや画像を指定することもできます。


◆他のページの特定の場所へジャンプ

他のページの特定の場所にジャンプするときも、あらかじめリンク先のジャンプしたい場所に name 属性を使って印を付けておきます。
そして、href 属性でリンク先ページとマーカー名を指定します。

前のページの相対パスを説明している部分にジャンプしてみます。

(リンク先ページ=前のページ)
<p><a name="soutaipass"><strong>相対パス
</strong></a>は、〜(省略)
(リンク元ページ=このページ)
<p>
<a href="linkkoza.html#soutaipass">★前ページの相対パスにジャンプ!</a>
</p>

★前ページの相対パスにジャンプ!


◆メールの宛先を指定

href 属性で、値にメールアドレスを指定すれば、自動的にメールソフトが起動して、指定したアドレス宛のメールを送信できます。
値は、メールアドレスの頭に mailto: をつけて記述します。

<p>
<a href="mailto:daobian@xx.wakwak.com">★間違いを発見したらこちらまで</a>
</p>

★間違いを発見したらこちらまで


◆リンク先を新しいウィンドウで表示

target 属性を使って値を _blank にすれば、リンク先を新しいウィンドウを開いて表示することができます。
target 属性を使わなければ、同一ウィンドウに表示されます。これはフレーム講座の「 ウィンドウ指定 」でも説明しています。

トップページを開いてみます。前に説明した画像を使ったリンクと比べて下さい。

<p>
<a href="../index.html" target="_blank">
<img src="nekobanner2.gif" width="88" height="77" border="0" alt="トップに戻るよ">
<br>
</a>
</p>

トップに戻るよ