サイトマップ
トップページ > HTML/XHTML > HTML / XHTML入門 > 下位階層へのリンク(最終修正日:2007-03-06)

下位階層へのリンク

リンクの指定のページでは、同じディレクトリ(フォルダ)内のファイルにリンクする方法を説明しましたが、通常、Webサイトを構築する場合、カテゴリ別にディレクトリ(フォルダ)を作成し、そこにファイルを保存することが多いです。このように他のディレクトリ(フォルダ)に保存されているファイルにリンクする方法を説明します。

Webをはじめ、ネットワークの世界ではフォルダのことを「ディレクトリ」と呼びます。このサイトでは以降、ディレクトリと表記していきます。

例として、下のような階層構造でファイルを保存していたとします。

  • directoryfish
    • filefish.html
    • directorycategory
      • directorysame
        • filechozame.html
        • filehohozirozame.html
        • filezinbeizame.html
        • directoryei
          • fileakaei.html
          • filenokogiriei.html
      • directorytai
        • filekurodai.html
        • filemadai.html

上図において、chozame.htmlから、akaei.htmlへのリンクといった、下位階層にリンクする場合、指定するファイルは違うディレクトリにあるので、href属性には、ディレクトリ名も指定しなければなりません。

Webなどのネットワークでは、ディレクトリを表す記号に「/」(スラッシュ)を使用します。具体的に、chozame.htmlから、akaei.htmlにリンクするには、

<a href="ei/akaei.html">アカエイ</a>

と指定します。この場合、eiディレクトリはchozame.htmlと同じディレクトリ(sameディレクトリ)にあるので、href属性の指定にはeiディレクトリから記述します。

ディレクトリを表す記号である「/」を「の」と読めば分かりやすいと思います。

<a href="ei の akaei.html">アカエイ</a>

ちょっと練習

上図を見ながら練習してみてください。

その1

hohozirozame.htmlからnokogiriei.html

<a href="ei/nokogiriei.html">ノコギリエイ</a>

その2

fish.htmlからzinbeizame.html

<a href="category/same/zinbeizame.html">ジンベイザメ</a>

categoryディレクトリの次にsameディレクトリを指定しています。ディレクトリの階層が増えれば、「/」の数も増えます。

その3

fish.htmlからmadai.html

<a href="category/tai/madai.html">真鯛</a>

その4

fish.htmlからnokogiriei.html

<a href="category/same/ei/nokogiriei.html">ノコギリエイ</a>

一番上位(fishディレクトリの中)から一番下位(eiディレクトリの中)にわたる指定。

  • ディレクトリの区切りには「/」(スラッシュ)を使用
前ページタグの属性 上へこのページの先頭 上位階層へのリンク次ページ
Copyleft copyLeft 2008 W-D-L.NET