DHC-オンライン講座
文系の人にもわかる HTML入門

Lesson 3 リンク

Lesson 2までに、簡単な文字中心のページはできましたが、上の例ではまだWebのもともとの意味である「蜘蛛の巣」のようなページとは呼べません。 単に独立した2つのページを別々に作成しただけです。 ページとページの間やページ内の移動をするための「リンク(link)」を追加しましょう。 別のファイル(ページ)へのリンク、同じページ内の別の部分へのリンクなど、すべてのリンクは<a>タグを用いて記述します。

別のページへのリンク <a href="...">

あるページから別のページへリンクを張るには、<a>タグを使います。 例として、Lesson 1で作ったトップページ(example1.html)から、Lesson 2の最後で作ったエッセイのページ(essay.html)へのリンクを張ってみましょう。 図3-1のように、「目次」を2番目のレベルの見出しで書き、その下に順序なしリスト(<ul>...</ul>)を使って項目を並べることにします。 今のところは「私のエッセイ」へのリンクだけが並びます。 図3-1のようなページにするには、トップページのファイルexample1.htmlをリスト3-1のように変更します。 同じファイル名だとわかりにくくなりますので、新しいファイルはindex.htmlという名前にしましょう(なぜこの名前にするかは後で説明します)。 「メモ帳」などのエディタを起動して、リスト3-1の内容を入力して、Lesson1で作ったwebpageというフォルダの中に、index.htmlという名前で保存してください。

図3-1 目次を入れたトップページ

リスト3-1 index.html トップページ(改訂版)

  1 <!DOCTYPE html>
  2 <html lang="ja">
  3 <head>
  4 <meta charset="utf-8">
  5 <title>インナーウェブ ̶ 内なる宇宙を見つめて</title>
  6 </head>
  7 
  8 <body>
  9 <h1>インナーウェブへようこそ</h1>
 10 <p>
 11インナーウェブは現代に疲れたあなたを心からリラックスさせる「癒しの空間」をご提供いたします。 
 12 </p>
 13 <hr />
 14 <h2>目次</h2>
 15 <ul>
 16   <li><a href="essay.html">私のエッセイ</a></li>
 17 </ul>
 18 <hr />
 19 </body>
 20 </html>

メモ

上のリストで、左側に番号の付いていない行は、前の行の後に改行をおかずに続けて入力されたものです。 表示の都合で複数行に分かれています。

16行目がリンクの部分です。

16 <li><a href="essay.html">私のエッセイ</a></li>

<li>...</li>はLesson 2で見たように、リストの項目を囲むタグでした。 リンクを表すには<a>タグを使います <a>...</a>の...の部分にはリンク先のページを表す文字列を書きます。 この例の場合「私のエッセイ」が入っています。 この文字列は、図3-1のように、通常青い文字で下線が引かれ、リンクであることがわかるように表示されます。 「私のエッセイ」をクリックしたときに飛ぶ先(リンク先)は、<a>タグのhref(Hyperlink REFerence)という属性で指定します。 この例では、値としてessay.htmlというファイル(ページ)を指定します。 属性の値は必ず「" 」または「'」で囲んでください。 この例の場合は、index.htmlもessay.htmlも同じフォルダにありますので、単にファイル名だけを指定しますが、任意のウェブページのアドレスを指定することができます。 これにより、index.htmlの16行目の「私のエッセイ」のいずれかの文字をクリックすると、essay.htmlのページへ移動しその内容が表示されることになります(図3-2)。

※ <a>タグのaはanchor(錨の意味)のaなのですが、なぜanchorなのかは、後で説明します。

図3-2 index.htmlからessay.htmlへのリンク

同じページ内のリンク

これでトップページからエッセイのページへのリンクができました。 さて、先ほど作ったエッセイのページにもリンクが欲しい所があります。 目次は作りましたが、これがあるだけであまりうれしくありません。 ウェブページならば、目次の項目をクリックしたら、そのエッセイに移動するようにしたいものです。 図3-3のように、エッセイの目次の項目もリンクにして、項目をクリックするとそのエッセイに飛んでいくようにしましょう。

図3-3 エッセイのページの目次にリンクを張る

また、逆に、図3-4のように各エッセイの終わりからは先頭の目次に戻るリンクや、一気にトップページに戻るリンクをつけてみましょう。

図3-4 先頭に戻るリンクとトップページに戻るリンク

これには、essay.htmlをリスト3-2のように変更します。

リスト3-2 essay.html(改訂版) ページ内へのリンク

  1  <!DOCTYPE html>
  2  <html lang="ja">
  3  <!-- essay.html -->
  4  
  5  <head>
  6  <meta charset="utf-8">
  7  <title>エッセイ</title>
  8  </head>
  9  
 10  <body>
 11  
 12  <h1 align="center"><a name="top"></a>エッセイ</h1>
 13  
 14  <h2>目次</h2>
 15  <ul>
 16  <li><a href="#samgaetang">蔘鶏湯</a>(サムゲタン、2004年9月)</li>
 17  <li><a href="#night">夜の十分間</a> (2004年7月) </li>
 18  <li><a href="#onsen">温泉</a>(2004年6月)</li>
 19  </ul>
 20  
 21  <hr />
 22  
 23  <h3><a name="samgaetang"></a>蔘鶏湯(サムゲタン)</h3>
 24  <p>
 25  去年半年ほど韓国で暮らしました。 韓国の食べ物はほとんど辛くて私
     の口には合わないものが多くて困ったのですが、なかにはとても好き
 26  になったものもあります。 中でも、蔘鶏湯(サムゲタン)とスジェビ
     はうちの家族全員が大好きに。 スジェビの方は、「韓国式すいとん」な
 27  どと紹介されているように、家でも比較的簡単に作れるようです。 うち
     でも、「今日はスジェビにしよう」と月に1ペンぐらいは言いま
 28  す。 
 29  </p>
 30  
 31  <p>
 32  おいしい蔘鶏湯が食べたい。 できれば、すぐに行けるようなところで。 
 33  </p>
 34  
 35  <hr />
 36  <a href="#top">最初に戻る</a>
 37  <a href="index.html">トップページに戻る</a>
 38  <hr />
 39  
 40  <h3><a name="night"></a>夜の十分間</h3>
 41  <p>
 42  玄関の戸を開け外に出る。 真っ暗闇の中、トイレを目指す。 あと少しだ。 
     手探りで裸電球のスイッチをパチッといれ、あたりが明るくなっ
 43  てホッと一息。 シャーといい気持ち。 
 44  </p>
 45  
 46  <p>
 47  今の私、夢の中でトイレに行くことはあっても、そこで用まで足すことは
     なくなった。 だが、ふと気がつくと足がトイレに向いていること
 48  が多い。 あの夜の十分間が夢だったら、もっと平和な日々が送れているの
     かもしれないのだが。 
 49  </p>
 50  
 51  <hr />
 52  <a href="#top">最初に戻る</a>
 53  <a href="index.html">トップページに戻る</a>
 54  <hr />
 55  
 56  <h3><a name="onsen"></a>温泉</h3>
 57  <p>
 58  朝から晩までコンピュータの前に坐っているため、肩や首、腰などが慢性的
     にこったり痛かったり。 そんな私にうれしい味方が現れた。 近
 59  くに温泉がオープンしたのである。 近くの駅から無料送迎バスがあり、家か
     ら30分少しで温泉に浸かることができるようになった。 
 60  </p>
 61  
 62  <p>
 63  銭湯にに比べるとちょっと高めだけど、温泉宿に1回泊まりで行くお金があ
     れば、こちらには10回は行ける。 そして、この温泉は体にとて
 64  もいいような気がする。 お近くの方、おすすめです。 
 65  </p>
 66  
 67  <hr />
 68  <a href="#top">最初に戻る</a>
 69  <a href="index.html">トップページに戻る</a>
 70  <hr />
 71  
 72  </body>
 73  </html>

飛んでくる側の指定 <a name=&dqot;....&dqot;>

まず、リスト3-2の12行目に注目してください。

 12  <h1 align="center"><a name="top"></a>エッセイ</h1>

<a>(アンカー)タグは前にも出てきましたが、ここにはリンク先を示すhref属性は指定されていません。 代わりにname属性が指定されています。 じつはこちらの方が「アンカー(いかり)」としての使い方なのです。 このように、name属性で値を指定しておくと、文書中の飛び先(リンクされる方)として使えます。 飛び先を指定するだけで、開始タグ<a>のすぐ後ろに終了タグ</a>を書いてかまいません。

一方、リンク元では36行目のように指定します。

36  <a href="#top">最初に戻る</a>

「最初に戻る」をクリックすると「同じページにある」name= " top " と指定してある<a>タグの位置に移動します(図3-5)。 href属性にはウェブページのアドレスを指定できるのですが、#に続いて飛び先を指定することによりページの途中への移動もできるわけです。

図3-5 同じページ内のリンク

同じように、16行目を見てください。

16 <li><a href="#samgaetang">蔘鶏湯</a>(サムゲタン、2004年9月)</li>

このリンクはsamgaetangという名前がつけられた箇所へのリンクになります。 リンク先はどこにあるかというと、当然「蔘鶏湯(サムゲタン)」というタイトルのところ(23行目)にあります。

23 <h3><a name="samgaetang"></a>蔘鶏湯(サムゲタン)</h3>

このように、ページ内での移動用のリンクを張るには、同じ<a>タグのname属性とhref属性を使い分ける必要があります。

トップページへのリンク

それぞれのエッセイの最後には、ページの先頭に戻るリンクだけでなく、トップページへのリンクも作ることにしましょう。

<a href="index.html">トップページに戻る</a>

これはすでに見た、index.htmlからessay.htmlへのリンクの反対方向のリンクになります。 指定の仕方は同じで、ファイル名を書くだけです。 これによりindex.htmlとessay.htmlは相互にリンクすることになります(図3-6)。

図3-6 相互リンク

以上で、次の3種類のリンクが完成しました。

別のページの途中へのリンク <a href="...#...">

上の例では、同じページ内の途中に移動する例を見ましたが、別のページの途中に移動することもできます。 たとえば、トップページのindex.htmlのファイルに、次のように書くとそれぞれのエッセイのタイトルにすぐに移動することになります(図3-7)。

図3-7 目次を細かく
<ul>
 <li> <a href="essay.html#samgaetang" >蔘鶏湯(サムゲタン)</a> </ li> 
 <li> <a href="essay.html#night">夜の十分間</a> </ li> 
 <li> <a href="essay.html#onsen">温泉</a> </ li> 
</ul>

このように、別のページの途中に移動するには、移動先のページのファイル名(アドレス)に続けて「#」、その後に<a name="..."></a>で指定したアンカーの名前を続けます。

他のサイトへのリンク <a href="アドレス">...</a>

先ほどのエッセイのページ(リスト3-2)の58-59行目に次のような文がありました。

近くに温泉がオープンしたのである。 

読者がこの温泉に行きたいと思ったとき、その温泉のウェブページがわかれば便利ですので、そこへのリンクを追加してあげましょう。 それには<a>タグを次のように使います。

近くに<a href="http://www.onsen.com/">温泉</a>がオープンしたのである。 

自分のサイトの外のページにリンクするには<a>タグのhref属性にリンク先のページのアドレスを書きます。 上の例では、http://www.onsen.com/というページにリンクしています これで、図3-8のように「温泉」の部分がリンクになり下線付きの青字で表示されます。

※このページは架空のものです。

図3-8 外部へのリンク

メモ

ウェブページのアドレスの指定方法には http://www.onsen.com/index.htmlといったように、表示される文書に到達する道筋をすべて指定する方法と、 http://www.onsen.com/のようにファイルの入っているフォルダだけを指定する方法があります。 後者の場合、通常 http:// www.onsen.com/index.htmlあるいは http://www.onsen. om/index.htmというファイルが自動的に表示されるように設定されています。 したがって、トップページ(あるいはそのフォルダの目次に当たるページ)の名前を index.htmlあるいは index.htmとしておくと、アドレスを入力する際に最後のファイル名の部分(index.htmlあるいは index.htm)を省略できるわけです。 上の例の http://www.onsen.com/も省略形なのです。 なお index.htmlというファイル名を省略してフォルダ名だけを指定する場合、 http://www.onsen.com/のように最後の「/」を書くのが「正式な」書き方なのですが、多くのサーバでは最後の「/」を省略しても同じページが表示されるようになっています。

※WindowsやMac OSでは「フォルダ(folder)」と呼ばれますが、LinuxやUnixでは「ディレクトリ(directory)」と呼ばれます。

相対リンクと絶対リンク

onsen.comのような外部のページへのリンクと「インナーウェブ」内のページへのリンクと、少し指定の方法が違っていました。 次のonsen.comへのリンクのように、ページのアドレス全体を書く方法を「絶対リンク」と呼びます。 どこから指定する時でも、同じアドレスになるので、「絶対的に」指定できるわけです。

近くに<a href="http://www.onsen.com/">温泉</a>がオープンしたのである。 

これに対して次のように、アドレスの一部を現在のページからの相対的な位置関係で示すもののことを「相対リンク」と呼びます(図3-9)。

<a href="#top">最初に戻る</A> 
<a href="index.html">トップページに戻る</A> 

<a href="essay.html#night ">夜の十分間</A>

図3-9のように、絶対リンクは自分(の組織)が作ったウェブページの外、つまり別のサイトを参照する場合に用いるのが普通です。 これに対して、相対リンクは内部的なリンクに用います。 相対リンクにしておけば、フォルダを移動したりしても、相対的な位置関係が変わらなければHTMLのコードを変える必要がありません。

図3-9 絶対リンクと相対リンク

別のフォルダへの配置とリンク

上の例では、essay.htmlをトップページ(index.html)と同じファイルに置きましたが、上のフォルダにあるファイルや、サブフォルダ(下位のフォルダ)にあるファイルを指定することもできます。

たとえば、essayというフォルダを作ってその下にsamgaetang.html、ten-minutes.html、hot-spring.htmlといったファイルを作って、それぞれのエッセイを書いたとしましょう。 この場合、トップページにある index.htmlからエッセーへのメニューは、たとえば次のようにすることができます。

リスト3-3 サブフォルダへのファイルの配置

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>インナーウェブ ̶ 内なる宇宙を見つめて</title>
</head>

<body>
<h1>インナーウェブへようこそ</h1>
<p>
インナーウェブは現代に疲れたあなたを心からリラックスさせる「癒しの空間」を
ご提供いたします。  
</p>
<hr />
<h2>目次</h2>
<ul>
  <li><a href="essay/samgaetang.html">サムゲタン</a></li>
  <li><a href="essay/ten-minutes.html">夜の十分間</a></li>
  <li><a href="essay/hot-spring.html">温泉</a></li>
</ul>
<hr />
</body>
</html>

この場合、essayフォルダの中にあるファイルからトップページへのリンクは、次のように ひとつ上のフォルダを示す ".." を使って表すことになります。

  <a href="../index.html">トップページに戻る</a>

このように、自分が作るHTMLファイル間のリンクは、サブフォルダをうまく利用して、相対リンクを使って記述するようにしておくと、ウェブサーバで公開するためにほかのコンピュータに移動したりしても、HTMLのコードを変える必要がなくなります。

まとめ

このLessonでは、ウェブの最大の特徴と言える「リンク」について学びました。 リンクの種類には、同じページ内のリンク、自分のサイト内の別のページへのリンク、そして自分のサイトの外へのリンクの3種類があります。 いずれも、<a>タグとhref属性を使って指定します。

リンク

文書の途中のリンク先の指定とそのリンク先へのリンク

相対リンクと絶対リンク

DHC-オンライン講座
文系の人にもわかる HTML入門
Lesson 3