Sample10 リンク

HTML では他の HTML 文書や画像ファイルなどに対するリンクを作成する ことができます。


HTMLファイルへのリンク

先週使った HTML 資料に対してリンクを張ってみます。 こうすることで断片的な資料を一つのものとして便利に利用することが できます。

  1. sample01.html : 最もシンプルな HTML 文書

  2. sample02.html : 改行していないとずらずら長い行になる

  3. sample03.html : 適度な改行を入れる ( BR タグ)

  4. sample04.html : 仕切り線を入れる ( HR タグ)

  5. sample05.html : 見出し付きの構造化された文書 ( Hn (nは1から6) タグ)

  6. sample06.html : 箇条書き ( UL, OL タグ )

  7. sample07.html : パラグラフ、センタリング、右寄せ (P, DIV 他)

  8. sample08.html : 背景色指定、文字の色、サイズ指定 (FONT 他)

  9. sample09.html : 画像の扱い ( IMG タグ )

リンクの起点(クリックするとリンク先に移動する文字列、上の例では "sample09.html"など)をアンカーと呼びます。
アンカー部分には「ここにはリンクがあります」ということを示すために、 通常の文字とは違う表示がされます。 (一般的には文字色が青色で下線がついたりします。ただ FONT タグの設定次第で 変えられるので、そうなっていないアンカーもあり得ます。)

断片的な情報をリンクで組み合わせて、まとまった情報として提供する、 というのは資料的な Web を作るときの基本的な手法です。 見やすい、理解しやすい Web 資料を作るとき、ひとまとまりの情報をどう分割して 各ページに配置するか、というのも Web 制作の重要な技術です。
(HTML書法に詳しくなっただけでは良い Web サイトは作れない)


画像へのリンク

リンクの対象(リンク先などとも呼ばれます)には HTML ファイルだけでなく、 画像などでもかまいません。

サンプルに彼岸花 (28KByte, JPEG, 講師撮影) などを置いてみました。


画像からのリンク

リンクの起点(アンカー)にはテキストだけでなく、画像も使えます。

顔 この顔に見覚えがないと思った人はリンクをたどって調べてください。

アンカーの目印として枠がついているのが分かりますか? アンカー付き画像(左)と、付いていない画像(右)とで比べてください。
ソファー ソファー

但し、この枠を付けないようにさせることもできますので、 常にアンカーには枠があるとは言い切れません。(下例)

ボタン(のようなもの)

まるでボタンスイッチのように見える絵を作ることができると思います。 これを利用して「ここをクリックするとこのような情報にたどり着けますよ」 という表現をさせることがよく行われています。

KSUwatch

この例では BORDER= 指定を使うことで枠を表示させないようにしています。

下線がついていたりついていなかったり、枠があったりなかったりでは、 どれがアンカーでどれがそうでないか分からないと思うかも知れません。 枠を付けたり外したり、というのはデザイン上の配慮ですから、そうする ことで分かりにくくなるようでは本末転倒です。そんなデザイン変更ならしない ほうがまし、というものです。
逆に、そうした標準的でないアピアランス(見た目)であったとしても、 見る人にわかりやすい表現を捜すことがデザインには重要だということです。
例えばこのページの左下端のボタンは枠がありませんが、なんとなくクリック してみたくなりませんか?(クリックすると何か起きそうに見えませんか?)


<<Back
Yutaka Yasuda (yasuda@cc.kyoto-su.ac.jp)