ハイパーリンク

リンクの基本的な使い方

• 同一ディレクトリ内のファイルにリンクする。
  <a href="colorsample.html"> カラーサンプル</a>

  　　カラーサンプル

• WEBページの URL を指定する。
  <a href="http://pepe6868.web.fc2.com/24.html"> HTMLタグ一覧へ</a>

  　　HTMLタグ一覧へ

相対パスを使おう

相対パスとは，現在のファイルから見て，ディレクトリ構造上，何階層上か下かを 記述する方法です。相対パスを使うと，はじめフロッピーディスクに 作成しておいたファイルをハードディスクや，サーバーに置いたりしても， URLの記述を変更しなくて済みます。

リンク先のファイルの位置	URL
同じディレクトリにあるファイル	filename
現在のディレクトリより下位階層にあるファイル	directoy/filename
現在のディレクトリ	./
現在のディレクトリから一つ上の階層のディレクトリ	../
現在のディレクトリから一つ上の階層にあるファイル	../filename
さらにもう一つ上の階層にあるファイル	../../filename

図はA:\ドライブ上にいくつかのフォルダとファイルを作ってある様子を示している。
今，A:\hobby\photo\index.html から各ファイルにリンクする場合の URL を示してみよう。

ファイル構成図 [A:\] | +--index.html +--daisuki.html +--[hobby] | | | +--index.html | +--hitorigoto.html | | | +--[photo] | | | | | +--index.html　← | | +--snap.html | | +--[images] | | | | | +tori.jpg | | | +--[computer] | | | +--index.html | +--cpu.html | +--[mobile] | | +--[family] +--index.html　 | +--index.html +--hana.gif

A:\hobby\photo\snap.html にリンクする。
　　<a href="snap.html">　〜　</a>

A:\hobby\photo\images\tori.jpg にリンクする。
　　<a href="images/tori.jpg">　〜　</a>

A:\hobby\hitorigoto.html にリンクする。
　　<a href="../hitorigoto.html">　〜　</a>

A:\hobby\computer\cpu.html にリンクする。
　　<a href="../computer\cpu.html">　〜　</a>

A:\index.html にリンクする。
　　<a href="../../index.html">　〜　</a>

A:\family\index.html にリンクする。
　　<a href="../../family/index.html">　〜　</a>

index.html という名のファイル

"index.html" というファイル名は特別な意味を含みます。 一般的に WEB サーバーは，URL にただ単にディレクトリのみ指定された場合は， そのディレクトリ内の "index.html" という名のファイルを検索して表示します。 したがって，先ほどのURL は次のように書くことができます。

<a href="index.html">　→　 <a href="./">

<a href="computer/index.html">　→　 <a href="computer/">

<a href="../../family/index.html">　→　 <a href="../../family/">

なお，これは WEB サーバーにファイルを FTP などで置いてはじめて有効になるので， ローカルコンピュータ上では，index.html は検索・表示されずに， ディレクトリ一覧が表示されます。

target の使い方

target オプションを使うと，フレームなどを使用しているときに， リンク先のページを表示するフレームやウィンドウを指定できます。

　　　詳細はフレームのこちらを参照して下さい