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

上位階層へのリンク

下位階層へのリンクの次は、上位階層へのリンクを紹介します。

下のような階層構造でファイルを保存していたとします(前ページと同じです)。

  • fish
    • fish.html
    • category
      • same
        • chozame.html
        • hohozirozame.html
        • zinbeizame.html
        • ei
          • akaei.html
          • nokogiriei.html
      • tai
        • kurodai.html
        • madai.html

上図において、akaei.htmlから、chozame.htmlへのリンクのように、上位階層にリンクする場合、上位階層を表す記号の「..」(ピリオド2つ)を使用します。Webやネットワークでは1つ上の階層を表す記号に「..」を使用します。

「..」だけでは、「1つ上」という意味だけなので、ディレクトリを表す「/」と組み合わせて、「../」と記述します。これで、「一つ上のディレクトリ」という意味になります。

具体的に、akaei.htmlからchozame.htmlにリンクするには、

<a href="../chozame.html">チョウザメ</a>

と指定します。「一つ上のディレクトリのchozame.html」という意味になります。

HTMLおよび、XHTMLでは、「..」は、「/」とセットで使用されることになるので、「../」で「一つ上のディレクトリ」と覚えておいた方が都合が良いと思います。

通常使用することはありませんが、「.」(ピリオド1つ)は保存されているファイルと同じ場所を表します。つまり、「./」で「このディレクトリ」ということになります。

「../」と「/」を使用すれば、akaei.htmlからmadai.htmlのように、上位階層の別のディレクトリにあるファイルを指定することもできます。akaei.htmlから、madai.htmlへは、

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

となります(一つ上のtaiディレクトリのmadai.html)。

ちょっと練習

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

その1

nokogiriei.htmlからhohozirozame.html

<a href="../hohozirozame.html">ホホジロザメ</a>

その2

zinbeizame.htmlからfish.html

<a href="../../fish.html">魚</a>

一つ上のそのまた上を指定しています。ディレクトリの階層が増えれば、「../」の数も増えます。

その3

nokogiriei.htmlからfish.html

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

一番下位から、一番上位にわたる指定。

その4

nokogiriei.htmlからkurodai.html

<a href="../tai/kurodai.html">黒鯛</a>

一つ上のtaiディレクトリのkurodai.htmlを指定。

まとめ
  • 「../」(ピリオド2つとスラッシュ)で1つ上のディレクトリを表す
CopyLeft 2014 Webデザインレッスン プライバシーポリシー サイト管理者に連絡