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

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

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

p3-1

p3-2

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

<a href="ディレクトリ名/ファイル名">テキスト</a>

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

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

同じように「park.html」ファイルへリンクを設定する場合は次のようになります。

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

1つ下の階層ではなく2つ以上下の階層にあるファイルへリンクを張る場合も同様です。深い階層にあるファイルへリンクを張る場合発議の通りです。

<a href="dir1/dir2/dir3/file.html">テキスト</a>

サンプル

では実際に試してみます。今回は「index.html」から「zoo.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>お出かけ日記</title>
  </head>
  <body>
    <h1>お出かけ日記</h1>

    <p>
    外出した時の記録を残して行きます。
    </p>

    <p>
    <a href="diary/zoo.html">2008年12月 動物園</a>
    </p>

    <p>
    <a href="diary/park.html">2008年10月 公園</a>
    </p>

  </body>
</html>

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

p3-3

今回もリンクが設定されているテキストには下線が引かれています。「2008年10月公園」と書かれた部分をクリックして下さい。

p3-4

リンク先として設定されているWebページが同じブラウザのウィンドウ上に表示されます。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

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