リンクを貼る

リンクの概要

文字や画像をクリックすることで、別のWebページやWebサイト、または電子メールソフトが起動するしくみを「リンク」といい、リンク元・リンク先ともに「アンカー」と呼びます。

別のページへのリンク

リンクを指定するには「a要素」を記述し、「href属性」でリンク先を指定します。
同一フォルダ内のページなら「ファイル名」のみ指定(相対リンク)
別のWebサイトへのリンクなら「http;//」から指定(絶対リンク)します。

<a href="index.html">トップページへ</a>
<a href="http://www.ninja.co.jp/">NINJATOOLS</a>

新しいページを開いてリンク先を表示するには「target="_blank"」を記述します。

<a href="http://www.ninja.co.jp/"  target="_blank">NINJATOOLS</a>

電子メールアドレスへのリンク

リンク先として電子メールアドレスを指定できます。リンクをクリックすることで自動的にメールソフトが起動します。
指定するアドレスの前に「mailtl:」を記述します。

<a href="mailto:abc123@ezmobank.ne.jp">メールを送る</a>

アドレスの後に「?subject=〜」で「件名」を指定することができます。

<a href="mailto:abc123@ezmobank.ne.jp?subject=コスギ構築HP からのメール">件名付きでメールを送る</a>

(注意!メールアドレスは架空のものです)

特定の場所へのリンク

Webページ内の特定の段落など具体的な場所にリンクを指定することができます。
リンク先には特定の場所の“目印”となる「アンカー名」を「name属性」で指定し、リンク元には「href属性」に「#」+「アンカー名」で指定します。

このページの見出し「リンクを貼る」にアンカー名「pagetop」を指定。
<h1><a name="pagetop">リンクを貼る</a></h1>

<a href="#pagetop">このページの先頭へ</a>

同様に別ページの特定の場所へのリンクも可能です。「URL#アンカー名」で指定します。

<a href="kiso3.html#font">HTMLを編集する/フォントサイズ・スタイルの変更へ</a>

画像にリンクを貼る

リンク元に画像を選びます。

<a href="index.html"><img src="画像ファイル" alt=""></a>
←クリック!

画像にリンクを貼ると上のような枠線が表示されます。枠線を消したい場合は「画像ファイル」+「border="0"」を記述します。

<a href="index.html"><img src="画像ファイル" border="0" alt=""></a>
←クリック!

戻る