HTML講座第16回
☆いろいろなリンク - クイックガイド
1. 別ウィンドウでリンク先を開く
target
たまには真面目に - donguri browser 
ここをクリックするとHTML講座トップページが別ウィンドウで開くよ。

ここをクリックするとこのページの一番下にジャンプするよ。


食堂
↑ここに『shoukudou』という名前が付けてあるよ

 
2. ページ内に名前をつけてみよう
name
 
3. ページ内の特定の場所にジャンプする
 
4. 画像にリンクを張るには
 
←前回『リンクさせてみよう』へ 次回『リンクの状態と色』へ→
別ウィンドウでリンク先を開く

前回紹介した方法ではリンクをクリックすると そのウィンドウにジャンプ先を表示するようになっていたけど、 今度は新たに別のウィンドウを開いて そこにジャンプ先を表示する方法を紹介。

表示先を指定する属性名はtargetだよ。

この属性は属性値によっていろいろな使い方が出来るんだけど、 別ウィンドウで開きたい場合には_blank(常に新しいウィンドウを開く)を 属性値に指定すればいいんだ。この時に_(アンダースコア)を忘れずにつけよう。 これを忘れると別ウィンドウで開けない事はないんだけど ちょっと意味合いが違ってきちゃうんだ。 詳しくはまたあとで説明するね。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<a href="nisshi.html" target="_blank">
日誌を見る</a>(別ウィンドウ)
</body>
</html>

腹減り日誌♪ - 
日誌を見る(別ウィンドウ)


試しにクリックしてみてね。
ブラウザでの表示はこちら(別ウィンドウ)

ページ内に名前をつけてみよう

今度はページの特定の部分に名前をつけてみよう。 例えば上の葉っぱの画像が表示されている部分に 『point1』という名前をつけるとかそういう感じ。 これにはリンクを張るのに使ったタグ、<a>と 次の属性をを使うよ。

場所の名前を指定する属性名はnameだよ。

<a>はhref属性をつけることでリンクを張るタグになるけど name属性を付けることによって ページの特定の場所に名前をつけることが出来るんだ。 属性値は任意の文字(極力半角英数字で)を指定するよ。 ただし、1つのページ内で同じ名前をつけた場所が 複数存在しないように注意しよう。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<a name="point">食堂</a>
</body>
</html>

表示は通常と変わらないよ。

腹減り日誌♪ - 



ブラウザでの表示はこちら(別ウィンドウ)

ページ内の特定の場所にジャンプする

今度はさっき名前をつけた場所にジャンプする方法を紹介するよ。 これには前回紹介した他のページにジャンプするやり方と同じで href属性の属性値に#に続けてジャンプしたい場所の名前を指定すればOKだよ。 例えば同じページ内のshokudouという名前の場所にジャンプさせたいなら href="#shokudou"といった感じになるよ。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<a href="#shokudou">食堂にいく</a>
</body>
</html>

腹減り日誌♪ - 



クリックするとこのページの上の方にジャンプするよ。

他のページの特定の場所にジャンプしたい場合は href属性の属性値にファイルのパスに続けて『#場所の名前』を指定してあげればいい。 例えばshokudou.htmlのpm10という名前の場所にジャンプさせたいなら href="shokudou.html#pm10"としてやればいいわけだね。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<a href="shokudou.html#pm10">食堂にいく</a>
</body>
</html>

腹減り日誌♪ - 




画像にリンクを張るには

 今までは文字にリンクを張ってきたけど ここでは画像にリンクを張る方法を紹介するよ。 とは言ってもやり方は簡単で<a>〜</a>の間に<img>を 書き込めばいいんだ。 ただ、そのままだと右の画像のように枠線が表示されてしまう。 これを表示させたくない場合は 画像の枠線の太さを指定する属性を使うよ。

画像の枠線の太さを指定する属性名はborderだよ。

属性値は半角数字、 枠線を表示させたくない場合は0を指定しよう。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<a href="index.html"><img src="risu.gif"
 width="75" height="50" border="0"></a>
</body>
</html>

腹減り日誌♪ - 


クリックするとHTML講座トップにジャンプするよ。

次はリンクの状態の説明やリンクの色の指定の仕方だよ。
前回はリンクの張り方だったね。
 
ウェブ木箱HTML講座
Copyright(C) 2003 あう