少々複雑なリンク

別のフォルダのページへのリンク

ファイルのコピー

マイコンピュータを開け、joelのshareにあるkaos03というフォルダを開けます。doubutsu というフォルダが見えます。

これを、joho.htmliroiro.html のある public にフォルダごとコピーします。

このdoubutsu というフォルダをには次のように2つのフォルダと1つのファイルが入っています。

kemono の中には inu.htmlneko.html 、tori には hato.htmlkamome.html が入っています。これをツリー表示であらわすと、次のようになります。

index.htmlからのリンク

htmlファイルはひとつのフォルダに全部入っていてもいいのですが、これから、ファイルが多くなることを見越して、kemonoとtoriに分類したわけです。

このような構造で、doubutsu 内の index.html から kemono の中の inu.htmlneko.html 、tori の中の hato.htmlkamome.html にリンクを張ってみましょう。

doubutsu 内の index.html をひらくと、リンクが途中までできています。

<a href="">いぬ</a>

ここに kemono/inu.html と書きます。index.html のある場所から見て、inu.html は kemono の中にあるので、kemono/inu.html です。

<a href="kemono/inu.html">いぬ</a>

一度保存してリンクが有効であることを確認します。(戻るときはブラウザのボタンで戻ってください)

できたら、他の neko.html hato.html kamome.html へのリンクも完成させます。

index.htmlへ戻るリンク

kemono 内の inu.htmlをひらくと、リンクが途中までできています。

<a href="">もくじ</a>

ここに ../index.html と書きます。../は親フォルダ、つまり自分のひとつ上のフォルダを表します。この例の場合は inu.html のある場所( kemono )から見て、index.html は ひとつ上の doubutsu の中にあるので、../index.html と書くわけです。

<a href="../index.html">もくじ</a>

つまりはこういうこと。

これは間違い

これを、doubutsu/index.html と書きたくなるかもしれません。しかし、このように書くと inu.html のある場所( kemono ) の中に doubutsu というフォルダがあって、その中に index.html というファイルがあるという指定になってしまいます。

<a href="doubitsu/index.html">もくじ</a>

と書くと、下のように指定をしたことになる。

実際に、このようなフォルダやファイルが無ければ表示することはできなくなります。

相対指定(相対アドレス)

a タグの href には、リンク先のファイルがどこにあるかの位置情報(パス)を加えることで同じフォルダにないファイルも指定できるわけです。

ここで用いた指定方法は、リンクを記入するファイルの位置(ファイルのあるフォルダと考えても同じ)を基準とするやり方で、「相対指定」(相対アドレス)といいます。

index.html にもどる場合

index.htmlにもどる例では、inu.htmlindex.html へのリンクを作っているので、基準は inu.html の位置になります。つまり、inu.html が入っている kemono フォルダから探し始めるのです。

そこにdoubutsu/index.html と書くと kemono の中に doubutsu はないかと探します。実際にはないので断念してしまいます。

そこに../index.html と書くと kemono の親フォルダを探して、doubutsu だと判断し、その中に index.html を探します。これは見つけることができます。

index.html からの場合

そのまえに作った index.html から inu.html へのリンクでは、index.html にリンクを作っているので、基準は index.html の位置になります。つまり、index.html が入っている doubutsu フォルダから探し始めるのです。

そこにkemono/inu.html と書くと doubutsu の中に kemono はないかと探します。これは成功してさらにその中に inu.html を探すということになります。

inu.html から hato.html へのリンク

inu.html から hato.html へのリンクはこうなります。

<a href="../tori/hato.html">はと</a>

tori は doubutsu の中にありますから、まず親フォルダ ../ にいって、その下にある tori を探し(../tori/)、その中にある hato.html を目指します(../tori/hato.html)。

hato.html から inu.html へのリンクも作ってみてください。


聖愛高等学校
http://www.seiai.ed.jp/