## リンクしよう

トップ > ホームページ入門 > リンクしよう

#### ■ 目次

- 他サイトへのリンク
- 自サイト内のリンク
- 相対リンク
- リンク先にフォルダを指定する
- ページ中の特定場所へのジャンプ
- 別ウィンドウで表示する

#### ■ 他サイトへのリンク

他のサイト（例えば Yahoo）にリンクを張るには次のようにします。

    <a href="http://www.yahoo.co.jp/">Yahoo!</a>

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

Yahoo!

#### ■ 自サイト内のリンク

例えば、http://www.yyy.zzz/aaa/bbb/ccc.html というページへのリンクを張る場合、次のようにします。これは通常、www.yyy.zzz という名前のサーバーの、aaa フォルダの中の bbb フォルダの中の、ccc.html という名前のファイルを意味しています。

    <a href="http://www.yyy.zzz/aaa/bbb/ccc.html">ページ</a>

ページが同じサーバー内にある時は、http://〜 を省略することができます。

    <a href="/aaa/bbb/ccc.html">ページ</a>

さらに、ページが同じフォルダにある場合は /〜...〜/ も省略することができます。

    <a href="ccc.html">ページ</a>

#### ■ 相対リンク

たとえば、作成した HTML ファイルが次のようなフォルダに置かれているとします。（□ はフォルダ、◇ は 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 にリンクするには次のようにします。ドットドット（`..`）は「ひとつ上のフォルダ」を意味します。

    <a href="../kupopo/ddd.html">ジャンプ</a>

#### ■ リンク先にフォルダを指定する

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

    <a href="../kupopo/">ジャンプ</a>

    <a href="http://xxx.yyy.zzz/ukeke/">ジャンプ</a>

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

また、省略時ファイルが存在しない場合は、そのフォルダ内のファイルの一覧が表示されます。（これも、サーバーの設定によって表示できない場合があります。）

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

ページの途中の特定の場所にジャンプすることもできます。まず、ジャンプ先の個所に<a name="名前">〜</a>で名前をつけておきます。ブラウザ上では何の変化もありません。<a href="#名前">〜</a> のリンクをクリックすると、その名前の場所にジャンプします。

    <a name="LocalLink">自サイト内のリンク</a>
    　　　　　:
    → <a href="#LocalLink">自サイト内のリンク</a>

次のリンクをクリックしてみてください。

自サイト内のリンク

他サイトや他フォルダ、他ファイルの特定個所へのリンクは次のようにします。

    <a href="http://www.yyy.zzz/aaa.html#Link">ジャンプ</a>

#### ■ 別ウィンドウで表示する

target 属性を指定することにより、リンク先を別ウィンドウで表示することができます。

    <a target="_blank" href="http://www.yahoo.co.jp/">Yahoo!</a>

下記のリンクをクリックしてみてください。

Yahoo!

Copyright (C) 1997-2002 杜甫々
初版：1997年3月30日、最終更新：2002年3月3日
http://www.tohoho-web.com/wwwbeg5.htm