■ 8.リンクの設定

さて、大まかな構成ができてきましたら、次はリンクを張ってみましょう。
リンクとは、あるページから別のページを表示させたり、同一ページの別の場所へジャンプする文字や画像のことです。

最初は、1枚で済んでいたホームページもコンテンツが増えてきますと1ページじゃ足りなくなったり、縦長いページであればそのページの指定場所をいきなり表示させたいと思いますよね。

そういったときにリンクを使用します。
リンクの書き方も奥が深いですから、単純なものから説明していきます。

例えば、ページが2枚あってそれぞれのファイル名が page1.html、page2.html でどちらも同じフォルダにある場合、
page1.html から page2.html を呼び出すときのタグは、

　<a href="page2.html">page2へジャンプ</a>

などと記述します。
ホームページ上には、

page2へジャンプ

と表示されます。
この表現の仕方は、人それぞれによって違います。
例をあげると、

○○のページへ
ここをクリックすると○○のページにジャンプします。
○○のページはここをクリックしてください。

などと言った表現をよく見ます。
それぞれの記述の仕方は、

<a href="page_b.html">○○のページへ</a>
<a href="page_b.html">ここをクリック</a>すると○○のページにジャンプします。
○○のページは<a href="page_b.html">ここ</a>をクリックしてください。

のように記述します。

ここまでは、そんなに難しくないですね。

ところが、ページが増えてくると管理が難しくなってきますので、別フォルダを作成してそれぞれのページを分類別に分けていくことになります。

そのようなときの指定方法を次に説明します。

■ リンクのページ指定

それでは、それぞれのページが別のフォルダにあった場合は、どう記述するのでしょう。
例えば次のような場合を例に挙げます。

c:\home（ホームページのフォルダ）
　　　├index.html（ホームページ）
　　　│
　　　├bun1（分類１のフォルダ）
　　　｜└page1.html
　　　│
　　　└bun2（分類２のフォルダ）
　　　　├page21.html
　　　　├page22.html
　　　　│
　　　　└bun21（分類２１のフォルダ）
　　　　　└page211.html

まず、index.html からそれぞれのページへのリンクは、次のように記述します。
<a href="bun1/page1.html">page1へジャンプ</a> <a href="bun2/page21.html">page21へジャンプ</a> <a href="bun2/page22.html">page22へジャンプ</a> <a href="bun2/bun21/page211.html">page211へジャンプ</a>
そのページより下のフォルダは、そのままフォルダ名から記述します。

次に、page21.html からそれぞれのページへのリンクは、次のように記述します。
<a href="../index.html">ホームページへ戻る</a> <a href="../bun1/page1.html">page1へジャンプ</a> <a href="page22.html">page22へジャンプ</a> <a href="bun21/page211.html">page211へジャンプ</a>
上記の、「../」はひとつ上のフォルダを意味します。
二つ上の場合は、「../../」と記述します。

また、特殊な記述としては、「./」があり、これは現在のフォルダを指します。
上記の
<a href="page22.html">page22へジャンプ</a> <a href="bun21/page211.html">page211へジャンプ</a> は、
<a href="./page22.html">page22へジャンプ</a> <a href="./bun21/page211.html">page211へジャンプ</a> と同義になります。

次に、page211.html からそれぞれのページへのリンクは、次のように記述します。
<a href="../../index.html">ホームページへ戻る</a> <a href="../../bun1/page1.html">page1へジャンプ</a> <a href="../page21.html">page21へジャンプ</a> <a href="../page22.html">page22へジャンプ</a>
ここまでの記述はすべて相対指定と言います。

これに対して絶対指定があります。
例えば、同じ画像を次のように、絶対指定を使用して指定することもできます。
<img src="//www.freeweb.ne.jp/computer/~t-atom/index.html"> <img src="/~t-atom/index.html">
サーバーによっては次のような指定で表示できることもあります。
<img src="/index.html">

さて、リンクの基本的な設定が分かったら、次は、リンクの追加機能を見ていきましょう。

■ リンクのtarget属性

リンクには、target属性があり、リンクされてるページを開くときの動作を指定することができます。

■ リンクの追加機能

同一ページ内の指定した位置にジャンプする場合は、次のように、ジャンプ先にアンカーを記述し、
<a name="top">

次のように、そのアンカーへのリンクを記述します。
<a href="#top">

この方法は、次のように別ページへのリンクにも使用できます。
<a href="page12.html#top">

ここをクリックしてみてください。→このページのトップへ

次のように「title」属性を記述しますとリンク文字に説明が表示されます。
<a href="#top" title="このページのトップに戻ります。">

この文字の上にマウスをおいてみてください。→説明表示のサンプル

リンク文字の変わりに画像を指定することもできます。
<a href="/><IMG src="atommin.gif"></A>

画像の周りに表示されるリンク枠を表示したくない場合は、次のように指定します。
　<a href="/"><IMG src="atommin.gif" border="0"></A>
　

■ リンクのその他機能

1. 新しいウィンドウで開く
   <a href="/" target="_blank">
   新しいページを開くサンプル
2. そのページすべて新しいウィンドウで開く
   BODY句内に次のような「BASE TARGET」を追加する
   （指定した位置以降に適用されます。）
   <base target="_blank">
3. メール送信を開く
   <a href="mailto:aaa@bbb.jp?subject=はじめまして&body=本文の記述">
   メール送信のサンプル
4. ファイルのダウンロード
   <a href="/lzh/tcounter.EXE">
   ファイルのダウンロードのサンプル
5. リンク文字の下線を消す
   　　<a href="/lzh/tcounter.EXE" style="text-decoration : none">
   　　ファイルのダウンロードのサンプル