## リンク

トップ > 逆引きリファレンス > リンク

#### ■ リンクするには

他のページや他のサイトにリンクするには <a> を用います。

    <a href="http://www.tohoho-web.com/how2/link.htm">リンク</a>

ジャンプ先が同じサイトの場合は http://〜 を省略することができます。

    <a href="/how2/link.htm">リンク</a>

ジャンプ先が同じフォルダの場合はさらに /〜/ を省略することができます。

    <a href="link.htm">リンク</a>

ひとつ上のフォルダのファイルにジャンプする場合は、「ひとつ上のフォルダ」を意味するドットドット（`..`）を用います。

    <a href="../index.htm">トップ</a>

#### ■ ページの途中にリンクするには

ページの途中にリンクする、つまり、リンクをクリックした時にページの途中にジャンプさせるには、ページの途中に <a name="名前">...</a> で名前をつけておいて、<a href="ページ#名前">...</a> でジャンプします。例えばこのトピックには次のように名前をつけています。

    <h4> ■ <a name="nameLink">ページの途中にリンクするには</a></h4>

そうして、次のようにリンクを張ります。

    <a href="link.htm#nameLink">ページの途中にリンクするには</a>

#### ■ 画像をリンクボタンにするには

<img> タグを <a> で囲むことにより、画像をリンクボタンにすることができます。border=0 を指定しないと画像の周りに枠線が表示されてしまいます。また、<img> タグの < の前や > の後ろにスペースや改行を空けてしまうと、ブラウザによっては画像の前後に小さなゴミのようなもの（下線付きのスペース文字）が表示されてしまうことがあります。

    <a href="xx.html"><img src="xx.gif" alt="xx" border=0 width=10 height=10></a>

#### ■ リンクの色を変えるには

リンクの色を変えるには、<body> タグに link、vlink、alink 属性を指定する方法があります。link は通常のリンクテキストの色、vlink は訪問済みリンクテキストの色、alink はマウスでクリックした時のリンクテキストの色を意味します。

    <body link="#0000cc" vlink="#000080" alink="#ff0000">

スタイルシートで指定する場合は、<head>〜</head> の間に以下の記述を追加します。

    <style type="text/css">
    <!--
    a:link { color: #0000cc; }
    a:visited { color: #000080; }
    a:active { color: #ff0000; }
    -->
    </style>

ひとつひとつのリンクの色を個別に指定するには、次のようにします。

    <a href="xx.htm" style="color:red">XXXX</a>

#### ■ リンクの下線を表示しないようにするには

スタイルシートの text-decoration を用います。例えば、<head>〜</head> の間に以下の記述を追加することで、そのページのすべてのリンクで下線を表示しないようにすることができます。

    <style type="text/css">
    <!--
    A { text-decoration: none; }
    -->
    </style>

#### ■ リンクにマウスを乗せたときに色を変えるには

<head>〜</head> の間に以下のように記述してください。IE4.0 以上が対応しています。スタイルシートを変更すれば、他にもフォントを大きくしたりなどいろいろアレンジすることができます。

    <style type="text/css">
    <!--
    A:hover { color: red; }
    -->
    </style>

#### ■ 直前のページに [戻る] リンクを張るには

直前に見ていたページに戻るには、JavaScript の history.back() や history.go() を用いると便利です。

    <a href="javascript:history.back()">[戻る]</a>
    <a href="javascript:history.go(-1)">[戻る]</a>

#### ■ 別ページに自動ジャンプするには

別ページにジャンプするには、<head>〜</head> の間に下記の記述を追加してください。0 を 5 に変更すると、5 秒後に自動ジャンプします。

    <meta http-equiv="Refresh" content="0; url=http://www.yahoo.co.jp/">

#### ■ セレクトボックスからジャンプするには

下記のテクニックを用いることで、セレクトボックスで選択したサイト（ページ）にジャンプさせることができます。

    <select onchange="location.href=this.options[this.selectedIndex].value">
     <option value="#">検索サイトにジャンプ
     <option value="http://www.yahoo.co.jp/">Yahoo
     <option value="http://www.google.co.jp/">Google
     <option value="http://www.infoseek.co.jp/">Infoseek
    </select>

#### ■ Word や Excel の文書を開くには

Word や Excel などの文書ファイルを開かせるには、単にその文書へのリンクを張るだけで構いません。指定したファイルがダウンロードされ、.doc であれば Word、.xls であれば Excel など、拡張子に従って適切なアプリケーションが起動されます。

    <a href="sample.doc">サンプル文書</a>

#### ■ 閉じるリンクをつけるには

クリックするとウィンドウが閉じるような、閉じるリンクをつけるには、次のようにします。IE の場合、JavaScript を用いて開いたウィンドウはそのまま閉じることができますが、閲覧者があらかじめ開いていたウィンドウを閉じる際には、セキュリティの都合上、「ウィンドウは、表示中の Webページにより閉じられようとしています。このウィンドウを閉じますか？」の確認ダイアログが表示されます。

    <a href="#" onclick="window.close()">[閉じる]</a>

Copyright (C) 2003-2004 杜甫々
初版： 2003年10月12日、最終更新：2004年4月18日
http://www.tohoho-web.com/how2/link.htm