<a href=”URL” >***</a> リンクを指定する



<a>タグと</a>タグの間(***)に、文書を記述すると、その文書をクリックしたときに、「URL」に設定されたURLのページに ジャンプしたり、メールソフトを起動させてメールを送信できるようなリンクを作ることができます。

▼HTMLとXHTMLでの記述例

HTML <a href=”URL” >***</a>
XHTML HTMLと同じ

▼使用できる属性名と属性値

属性 解説
href URL ジャンプ先のページやファイル名を、絶対パスか相対パスで指定します。 

(例) <a href=”index.html”>***</a>

mailto:メールアドレス 連絡先メールアドレスを記述できます。クリックしたときに、 

ユーザーのメールソフトが起動し、

メールアドレス入力欄に自動的にメールアドレスが記述されます。

(例) <a href=”mailto:sample@masome.net”>***</a>

URL#ラベル (リンク元) <a href=”URL#ラベル”> ***</a> 

(リンク先) <a name=”ラベル”>***</a>

ページ内の特定部分にジャンプできます。

URLを記述しなければ同一ページ内、URLを記述すれば、

特定ページ内の特定部分にジャンプさせることができます。

ジャンプさせたい場所の<a>タグにname属性を指定し、

ラベル(適当な名前)を付ける必要があります。

ページが縦にスクロールできない場合や、 ページが重すぎる場合は、

正確な場所にジャンプさせられない場合があります。

ページを縦にスクロールさせるのに必要な幅は、

改行タグ<br />をページ最下部におくなどして、

増やすことでことができます。

(例:リンク元) <a href=”index.html#abc”>***</a>

(例:リンク先) <a name=”abc”>***</a>

name ラベル
target フレーム名 <FRAME> タグにname属性を指定してフレーム名を付けておくと、 

名前の付けられたフレームにページを表示させることができます。

(例) <a href=”index.html” target=”right”>***</a>

_blank 新しいウインドウを立ち上げて、リンク先のページを表示する。 

(例) <a href=”index.html” target=”_blank”>***</a>

_self リンク元のフレームにリンク先のページを表示させる。 

(例) <base href=”index.html” target=”_self”>***</a>

_parent <frameset>を定義したウインドウにリンク先のページを表示する。 

(例) <a href=”index.html” target=”_parent”>***</a>

_top フレーム表示を解除して、ウインドウ全体にリンク先のページを表示させる。 

(例) <a href=”index.html” target=”_top”>***</a>

共通属性 class, title, style, id

▼使用例(1) >>下記のサンプルをブラウザで表示する

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプルページ</title>
</head>

<body>
通常のリンク<br />
<a href="http://www.masome.net">masome.net</a><br /><br />

メールリンク<br />
<a href="mailto:sample@masome.net">メールアドレス</a><br /><br />

ページ内リンク<br>
<a href="#abc">このリンク</a>をクリックすると、<br /><br /><br /><br />
<a name="abc">この文章</a>にジャンプできます。<br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />

</BODY>
</HTML>

</body>
</html>

▼使用例(2)=<frameset>を使用した場合 >>下記のサンプルをブラウザで表示する

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプルページ</title>
</head>

<frameset rows="300,*">
<frame name="top" src="page1.html">

 <frameset cols="300,*">
 <frame name="left" src="page2.html">
 <frame name="right" src="page3.html">
 </frameset>

</frame>
</html>

page1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page1</title>
</head>
<body bgcolor="#77EF77">
<h1><font color="#ffffff">page1</font></h1>
<a href="page4.html" target="left">リンク(左のフレームにリンク先を表示)</a><br />
<a href="page4.html" target="right">リンク(右のフレームにリンク先を表示)</a><br />
<a href="page4.html" target="_top">リンク(フレームを解除してリンク先を表示)</a><br />
</body>
</html>

page2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page2</title>
</head>
<body bgcolor="#93ffff">
<h1><font color="#0000cc">page2</font></h1>
</body>
</html>

page3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page3</title>
</head>
<body bgcolor="#ffff88">
<h1><font color="#ff0000">page3</font></h1>
</body>
</html>