カスタム検索
トップページ >HTML/XHTML >HTML / XHTML入門 >下位階層へのリンク

下位階層へのリンク

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

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

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

  • fish
    • fish.html
    • category
      • same
        • chozame.html
        • hohozirozame.html
        • zinbeizame.html
        • ei
          • akaei.html
          • nokogiriei.html
      • tai
        • kurodai.html
        • madai.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 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡