上の階層のページへリンク

リンク先のファイルがリンク元のファイルがある階層よりも上の階層にある場合のリンクを設定する方法を確認します。

今回例としてリンク元のファイル「index.html」と、同じディレクトリに「diary」と言うディレクトリ作成しその中に「zoo.html」と「park.html」という2つのファイルを用意しました。前ページの例とは逆に「zoo.html」や「park.html」から「index.html」へのリンクを設定する方法を確認します。

p4-1

p4-2

上の階層のファイルへのリンクは次のように記述します。

<a href="../ファイル名">テキスト</a>

1つ上の階層は「..」で表します。2つ以上の上の階層も同じように「../../ファイル名」など「..」を階層の分だけ「/」でつなげて記述します。

今回の例で言えば、「zoo.html」ファイルから「index.html」へリンクを設定する場合は次のようになります。

<a href="../index.html">テキスト</a>

サンプル

では実際に試してみます。今回は「index.html」は前ページのサンプルから変更せず、「zoo.html」及び「park.html」から「index.html」へリンクを設定します。

zoo.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>動物園2008年12月</title>
  </head>
  <body>
    <h1>動物園にて</h1>

    <p>
    2008年12月。師走の寒い中でしたが動物園へ行って来ました。
    </p>

    <h2>ライオン</h2>
    <p>
    今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の
    前でウトウトしています。おかげで顔の形などはっきりと見る
    ことができました。
    </p>

    <h2>ペンギン</h2>
    <p>
    もともと寒い所に住んでいるペンギンは冬の季節であっても比
    較的元気な様子。それでも日暮れが近づいてくると寒かったの
    でしょうか。日差しがあたる場所へペンギン達が整列して太陽
    の方を眺めていました。
    </p>

    <p>
    <a href="../index.html">目次へ戻る</a>
    </p>

  </body>
</html>

park.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>公園2008年10月</title>
  </head>
  <body>
    <h1>公園にて</h1>

    <p>
    コスモスの季節、公園に行って見物してきました。
    </p>

    <h2>コスモス</h2>
    <p>
    ここの公園のコスモスは自然な感じが咲いています。あまり
    手入れがされておらず高さもばらばらです。
    </p>

    <h2>ドングリ</h2>
    <p>
    ドングリも結構落ちていました。冬が近いようです。
    </p>

    <p>
    <a href="../index.html">目次へ戻る</a>
    </p>

  </body>
</html>

では「index.html」ファイルをブラウザで表示させてみます。

p4-3

リンクが設定された「2008年10月公園」と書かれた部分をクリックして下さい。

p4-4

リンク先である「park.html」が表示されます。表示されたページには目次へ戻るためのリンクが最下部に設定してありますので「目次へ戻る」と書かれた部分をクリックして下さい。

p4-5

リンク先である「index.html」が表示されます。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。