リンクしよう

とほほのWWW入門 > ホームページ作成入門 > リンクしよう
2000年3月4日版

他のページへのリンク

HTMLに慣れてきて、書くことも増えてきたら、test2.html、test3.html など、別のページも作成してみてください。別のページができたら、最初のページ(test.html)から次のページ(test2.html)にリンクを張ってみましょう。test.html の中に、次のように記述してください。

次のページに <A HREF="test2.html">ジャンプ</A> するよ。

「ジャンプ」の部分が(通常)下線付きの青色で表示され、そこをクリックすると、そのページにジャンプできるようになります。

別ディレクトリのページへのリンク

ディレクトリとは、WindowsやMacOSで言うところのフォルダと同じ意味です。ファイルの数が増えてきたら、○○に関するファイルはこのディレクトリ、△△に関するファイルはこのディレクトリ・・・のように、ディレクトリごとに分けて保存しておくと便利です。

たとえば、作成したHTMLファイルが次のようなディレクトリに置かれているとします。(□はディレクトリ、◇はHTMLファイルを表します)

□ public_html
├□ hogege
│├◇ aaa.html
│├◇ bbb.html
│└□ zumomo
│ └◇ ccc.html
├□ kupopo
│└◇ ddd.html
aaa.html から bbb.html にリンクするには、上で説明したように、次のようにします。

<A HREF="bbb.html">ジャンプ</A>

aaa.html から ccc.html にリンクするには、ディレクトリをスラッシュ( / )で区切って次のようにします。

<A HREF="zumomo/ccc.html">ジャンプ</A>

また、aaa.html から ddd.html にリンクするには、「ひとつ上のディレクトリ」を表すドットドット( .. )を用いて、次のようにします。(「ひとつ上のディレクトリの中の、kupopo というディレクトリの中の ddd.html というファイル」という意味になります。

<A HREF="../kupopo/ddd.html">ジャンプ</A>

別サーバーのページへのリンク

別のWebサーバー上にあるページにリンクを張る場合は、http:// ではじまるURLを記述します。xxx.yyy.zzz の部分がWebサーバー名に相当します。

<A HREF="http://xxx.yyy.zzz/index.html">ジャンプ</A>

リンク先にディレクトリを指定する

リンク先にファイル名ではなく、ディレクトリ名を指定することもできます。

<A HREF="../kupopo/">ジャンプ</A>
<A HREF="http://xxx.yyy.zzz/ukeke/">ジャンプ</A>

この場合、通常、そのディレクトリの中にある「デフォルトファイル」が表示されます。デフォルトファイルは index.html だったり、index.htm だったり、default.htm だったりします。(サーバーの種別や設定によって異なります)

また、デフォルトファイルが存在しない場合は、そのディレクトリ内のファイルの一覧が表示されます。(これも、サーバーの設定によって表示できない場合があります。)

ページ中の特定場所へのジャンプ

ページの途中の特定の場所にジャンプすることもできます。たとえば、ここをクリックすると、このページの「別ディレクトリのページへのリンク」の個所にジャンプします。これを行うには、次のようにします。

<A NAME="OtherDir">別ディレクトリのページへのリンク</A>
     :
...たとえば、<A HREF="#OtherDir">ここ</A>をクリック...

ジャンプ先の個所に<A NAME="名前">〜</A>で名前をつけておき、<A HREF="#名前">でジャンプします。別のファイルの特定個所へのジャンプは次のようになります。

<A HREF="bbb.htm#xxxx">ジャンプ</A>

他のサーバーのページの特定個所へのジャンプは次のようにします。

<A HREF="http://www.yyy.zzz/bbb.htm#xxxx">ジャンプ</A>

画像をリンクボタンにしちゃおう

画像ファイル(次章で説明予定です)をリンクボタンにすることもできます。

<A HREF="xx.htm"><IMG SRC="xx.gif" BORDER=0
HEIGHT=20 WIDTH=20 ALT="説明"></A>

この際、<IMG>タグに BORDER=0 属性を指定しないと、画像の周りに青い枠線が表示されてしまい、見栄えが悪くなることがあります。

また、<A ...> と <IMG ...> の間、または <IMG ...> と </A> の間に改行を入れてしまうと、画像の前後に小さな青いゴミ(正体は、リンクテキストとして表示された改行マークなのですが)が表示されることがありますので、改行しないか、タグの途中(BORDER=0 と HEIGHT=20 の間など)で改行するようにしましょう。

  →   

Copyright (C) 1996-1999 とほほ
http://wakusei.cplaza.ne.jp/twn/wwwbeg5.htm