ハイパーリンクを覚えよう

今回はハイパーリンクのお勉強をします。

[ ハイパーリンクとは ]

ハイパーリンク（以下リンク）とは、指定された箇所をクリックするとそことは別の場所に飛ぶタグのことです。
このページの１番下にも、クリックすると研究室の扉へ飛ぶリンクがあります。
通常はテキストでリンクする方が多いと思いますが、画像でリンクすることもできます。

[ リンクのはり方 ]

テキストにリンクをはる場合は、下のようにタグを書きます。
<A HREF="☆">◎</A>

☆=移動先のURLを相対パスや絶対パスで指定する。
xx.htmlやhttp://labo.cside2.com/xx.htmlなど。

◎=ブラウザに表示させたい言葉を書く。『実験工房TOPへ』など。

画像にリンクをはる場合は、テキスト用で◎だった所に画像を表示するためのタグを書きます。
<A HREF="☆"><IMG SRC="画像ファイル名（xx.gifなど）" BORDER="0"></A>

※<IMG SRC="画像ファイル名" BORDER="0">というのが、画像を表示するためのタグです。

ここで要注意なのが、画像表示タグの中のBORDER="0"ってところ。
通常、テキストにリンクをはると文字の下に下線が出ますが、画像の場合はその画像を取り囲むように四角い線が出てきます。
デザイン的理由からわざと表示させている場合もありますが、そうじゃない場合はなんだかちょっと格好悪くていやんです。
BORDER="0"は、この四角い線を消す役割をしています。

[ リンクのはり方・応用 ]

リンクの下線を消すこともできます。これにはスタイルシートを使います。
※スタイルシートにはいろいろな書き方がありますが、ここではその中の１つを例として挙げます。
※※この方法は記述したファイル全体に結果が反映されるものです。

まずは<HEAD>〜</HEAD>の中に下のスタイルシートを書き込みます。
<STYLE TYPE="text/css">
<!--
A { text-decoration : none; }
-->
</STYLE>

あとは<BODY>〜</BODY>の中で普通にリンクをはるだけ。
すると 『研究室の扉へ』 のように、下線が消えて表示されます。

これを使えば画像リンクの時にBORDER="0"を指定しなくても四角い線は消えます。
ですが、スタイルシートを無効にしている（または表示できない）ブラウザで見た時は当然出てきてしまうので、BORDERの指定はしておいた方がいいと思います。

研究室の扉へ 次のページへ　次のページへ続きます☆