MENUへ 元のページに戻る
リンク

■ 1 リンクの書式
■ 2 他サイトへのリンク
■ 3 自サイトの中でのリンク
■ 4 ページ中の特定場所へのジャンプ
■ 5 別ウィンドウで表示する
■ 6 直前のページに戻るリンク ( history.go() )


Top へ

■ 1 リンクの書式


リンクの書式は大きく分けて2つあります。

  1. リンクさせる側(呼び出す)
       <a href="リンク先文書のURL">クリックさせる文字列など</a>
       
  2. リンクされる側(ページ内指定位置にジャンプさせる場所の指定)
       <a name="名前"></a>

Top へ

■ 2 他サイトへのリンク


他のサイト(例えば「うさくま」のトールペイント)ホームページにリンクを張るには次のようにします。

<a href="http://usakumahp.hp.infoseek.co.jp/">「うさくま」のトールペイント</a>

「うさくま」のトールペイントホームページ の部分が(通常では)下線付きの青色で表示され、そこをクリックすると、そのページにジャンプできるようになります。
  (注:このページではスタイルシートの設定によりリンク場所表示の設定を変えています。)



Top へ

■ 3 自サイトの中でのリンク

□ フォルダーを直接指定する

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

<a href="http://www.japan.xxx/hyogo/kobe/orenchi.html">ページ</a>

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

<a href="/hyogo/kobe/orenchi.html">ページ</a>

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

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

□ 相対リンク

たとえば、作成した HTML ファイルが次のようなフォルダに置かれており、
現在のページは(HTMLファイル kobe.html) とします。

□
├──[フォルダー kansai]
│      │
│      ├(HTMLファイル kobe.html) (現在のページ)
│      ├(HTMLファイル oosaka.html)
│      │
│      └──[フォルダー eki]
│           │
│           └(HTMLファイル sannomiya.html)
├──[フォルダー toukai]
│      │
│      ├(HTML ファイル nagoya.html)

kobe.html から同じフォルダー内にある oosaka.html へリンクするには次のようにします。

<a href="oosaka.html">大阪へジャンプ</a>

kobe.html から同じ kansaiフォルダー内にある eki フォルダー内の sannomiya.html にリンクするには次のようにします。

<a href="eki/sannomiya.html">三宮へジャンプ</a>

kobe.html から nagoya.html にリンクするには次のようにします。ドットドット(..)は「ひとつ上のフォルダ」を意味します。

<a href="../toukai/nagoya.html">名古屋へジャンプ</a>


Top へ

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

ページの途中の特定の場所にジャンプさせる場合、そのジャンプ先の個所に<a name="名前">〜</a>で名前をつけておく。(ブラウザ上では何の変化もない。)
<a href="#名前">〜</a> のリンクをクリックすると、その名前の場所にジャンプする。

<a name="kokodayoo">ここへジャンプしてね</a>
     :
<a href="#kokodayoo">いけぇ!</a>

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

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


Top へ

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

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

<a target="_blank" href="hptec_sub_color.htm">色見本ページ</a>

右のリンクをクリックしてみてください。  色見本ページ

□ target の属性について

リンク先の内容や、フォームの結果をどのウィンドウ(フレーム)に表示するかを指定する。
ウィンドウ(フレーム)の名前は、<frame> タグの name属性で名前付けした名前、JavaScript の open() の第2引数で名前付けした名前、もしくはアンダーバー(_)で始まる下記の特殊な名前のいずれかを指定する。

説明
_blank常に名前無しのウィンドウを新規に開いて、そこに表示します。
_self自分自身のウィンドウ(フレーム)に表示します。
_topウィンドウがフレームに分割されていれば、分割を全て解除して、そこに表示します。
_parentウィンドウがフレームに分割されていれば、1段だけ分割を解除して、その親フレームに表示します。

例えば、次の例では常に新しいウィンドウを開いてそこにリンク先の内容を表示する。

<a href="xxx.html" target="_blank">XXX</a>

次の例では、既に help という名前を持ったウィンドウ(フレーム)があればそこに、無ければ新しいウィンドウを開いて表示する。

<a href="xxx.html" target="help">XXX</a>


Top へ

■ 6 直前のページに戻るリンク ( history.go())

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

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

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


Top へ

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

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

<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>

Top へ