＜ボーダー属性をつけて、境界線を思うままに border タグ＞
ボーダーとは日本語にもなっていますよね。ボーダーラインなんて言います、あれですね。この border を追加させると境界線の太さを設定することができます。書き方は border="5" や border="10" などのようピクセル数で指定します。また、border="0" と指定することも可能です。
まず、border="0"と指定してみましょう。こうすると、境界線を表示させないようにできます。画像にリンクを張った場合、標準では画像の周囲の境界線が青く表示されてしまいます。この border タグで境界線の太さをゼロに設定すると、線が消えてすっきりします。
では、練習してみましょう。お好みの画像をご用意ください。画像にリンクを張った時の境界線の比較のために、ちょっとだけリンクのタグも登場させます。（リンクについては、画像シリーズが終わってから細かくやりたいと思います。）
その１）
普通にリンク付きの画像を貼り付け、境界線に表示される青い線を確認します。境界線のタグを使わないで普通にリンクを張ればそうなります。メモ帳で以下のように編集してみましょう。
<html>
<head>
<title>
リンク付き画像の境界線は標準では青いのよ
</title>
</head>
<body>
これが画像にリンクを張った場合の境界線です。<br>
津軽境界線冬景色ってか。(^_^;<br>
<A href="face.htm"><img src="yuki.jpg" alt="現在のみつりん邸からの冬景色">
</A><br>
今年の越後平野は雪が少ないのよねえ。<br>
画像の周りに境界線が見えることを確認した上で、画像をクリックしましょう。
<br>
リンク先のページに飛びます。<br>
</body>
</html>
編集したら、kyokaia.htm として名前をつけて保存します。ブラウザで開くとこうなります。
画像をリンクボタンとして利用すると、このように周囲に青い線が出来てしまいます。
続けて、リンク先に指定している face.htm を次のようにメモ帳で編集し、あらかじめ用意した画像と同じ場所に保存しましょう。
<html>
<head>
<title>
フェイスマークのページ
</title>
</head>
<body>
<center>
<font size=7 color="blue">(^o^)</font><br>
リンク成功です！！<br>
戻るときは、ブラウザの戻るボタンでどうぞ。<br>
戻ると、画像の周囲の境界線はどうなっていますか。<br>
</center>
</body>
</html>
ブラウザで開くとこうなります。上のページの画像をクリックすれば、このページに飛ぶはずです。
その２）
上の練習での画像の周囲の線を消してみましょう。最初の説明に登場した border="0" を追加するだけです。次のようにしましょう。
<html>
<head>
<title>
リンク付き画像の境界線消しましょう実験です
</title>
</head>
<body>
今度は画像リンクの境界線が消えているはずです。<br>
ボーダータグで境界線が消えました<br>
<A href="face.htm"><img src="yuki.jpg" border ="0" alt="現在のみつりん
邸からの冬景色"></A><br>
今年の越後平野は雪が少ないのよねえ。<br>
画像の周りに境界線が見えないことを確認した上で、画像をクリックしましょう。
<br>
リンク先のページに飛びます。<br>
</body>
</html>
今度は、kyokaib.htm として保存し、ブラウザで確認してみましょう。境界線が消えましたよね。
その３）
では、今度は普通に境界線を表示させてみましょう。もうお分かりですよね。border="太さ" に変更するだけです。太さの数字はもちろん、ピクセル数です。
<html>
<head>
<title>
リンク付き画像の境界線をしっかり表示させましょう実験です
</title>
</head>
<body>
今度は画像リンクの境界線がしっかりと表示されているはずです。<br>
ピクセル数を変更することで、境界線の太さが変えられます。<br>
<A href="face.htm"><img src="yuki.jpg" border ="10" alt="現在のみつりん
邸からの冬景色"></A><br>
今年の越後平野は雪が少ないのよねえ。<br>
画像の周りに境界線がしっかり見えていることを確認した上で、
画像をクリックしましょう。<br>
リンク先のページに飛びます。<br>
</body>
</html>
では、本日最後の練習です。今度はリンクの設定していない画像に境界線を
設定してみます。さきほどとは境界線の色が異なるはずです。
どんな色になるでしょうか。
<html>
<head>
<title>
画像の境界線を表示させましょう実験です。リンクなしバージョン。
</title>
</head>
<body>
今度は普通に境界線を表示させてみます。<br>
色は画像にリンクが張られた時とは異なり、シックな感じになりました<br>
<img src="yuki.jpg" border ="10" alt="現在のみつりん
邸からの冬景色"><br>
今年の越後平野は雪が少ないのよねえ。<br>
</body>
</html>
これを kyokaid.htm として保存し、ブラウザで確認してみてください。こうなるはずです。
では、今回はここまでです。次回は画像の周囲に空白を置くタグの書き方や、画像の周囲にテキストを回り込ませるタグの書き方をやろうと思っています。ここまで学習を進めてこられた方なら、簡単なはずです。(^_^)
