戻る
ページとページを繋げよう!
'02/05/13

 ページとページを繋ぐことをリンクと言い、通常、「こういう形」で表されます。
 他と色が違い下線がある状態。
 リンクは、
<a href="001.html">検索からはじめよう!</a> … 検索からはじめよう!
というように、<A>(アンカー)タグを使用します。
href="〇〇〇"」は、リンク先のファイルの場所を指定します。どこにある、どのファイルであるか。

 ここで、ファイルとフォルダ(ディレクトリ)について説明しておきます。
 ホームページを作成する時は、ホームページのファイルだけ纏めておく方が便利です。例えば、次のように…
webex001.htmlex002.html
〜〜〜〜〜〜〜〜〜
 ┠ ex005.htmlex006.html
 これは、「web」というフォルダを作成し、その中に「htmlファイル」を纏めています。
 同じディレクトリ上にある場合、リンクは、href="ex001.html"のようになります。
 では、以下を「ex007.html」として保存し、ブラウザで実行してみましょう。
---- ex007.html ----
<html>
<head>
<title>リンクの練習</title>
</head>
<body>
<a href="ex003.html">リンク1</a><br>
<a href="ex006.html">リンク2</a><br>
</body>
</html>
 では、DS9だけのページを作ろうとした時はどうなるでしょう。
 まず、「ds9」というフォルダを作るとします。作らなくても良いのでが、作っていた方がページが増えた時に整理しやすいので、ここでは作成するものとします。
 その時トップページの名前は、「index.html」とします。
「index.html」は「そのディレクトリのトップですよ」という意味があり、もしこのファイルが無いと、そのディレクトリの中身(ファイルの一覧)が表示されることになるので注意してください。
webds9
 ┃ ┗ index.htmlex001.htmlex002.html
〜〜〜〜〜〜〜〜〜
 ┠ ex005.htmlex006.html
 以上のようなディレクトリ構成になると思います。
 では、この時、「index.html」から「ex006.html」へリンクしようとすると、どうなるでしょうか。
 階層は今のディレクトリの一つ上になります。この場合、
<a href="../ex006.html">ex006.html</a> となります。
 hrefの後の「../」は、現在の階層の一つ上を意味し、二つ上の場合は「.../」とはならずに、「../../」となります。
 逆に、「ex006.html」から「ds9」の「index.html」にリンクしようとする場合は、
<a href="ds9/index.html">DS9のページ</a>
となります。この時、index.htmlが存在しているので、
<a href="ds9/">DS9のページ</a>
としても構いません。
 では、以下をフォルダ「ds9」に、「index.html」として保存してください。
---- ds9/index.html ----
<html>
<head>
<title>DS9のページ</title>
</head>
<body>
<a href="../ex003.html">リンク1</a><br>
<a href="../ex006.html">ex006.htmlへのリンク</a><br>
</body>
</html>
 これらは「相対パス」での、リンクと言います。相対パスでのリンクは、同じ階層または、その上下にあるときにのみ可能です。

 もし、インターネットを使った先へのリンクの場合はどうなるでしょうか。
 その際、リンクは「絶対パス」で指定することになります。
 絶対パスは、http:// から始まるURI(URL)になります。
 もし、このページへリンクを貼ろうとする場合は、
<a href="http://www.geocities.co.jp/Hollywood-Theater/4449/">リンク</a>
… リンク
と、なります。

 このページの様に、縦に長いページの場合、ページの途中へリンクしたい場合があるかもしれません。その場合は、その途中となる場所に<a name="〜〜"></a>と、「name」を指定するとことで、そこへのリンクを貼ることができます。
 例えば、
<a name="top">ここへジャンプしたいな〜〜〜〜</a>
と指定すると、リンクの際、
<a href="#top">ページのトップへ移動</a>
とすれば、ページの途中へジャンプすることができます。
 以下の「-トップ-」がそれにあたります。
 一番上の、「戻る」では、「href="./"」と「name="top"」を同時に指定しています。

-トップ-


2002/05/04
http://www.geocities.co.jp/Hollywood-Theater/4449/
作成者:stingo(スティンゴ) stingo@yahoo.co.jp