下位階層へのリンク
リンクの指定のページでは、同じディレクトリ(フォルダ)内のファイルにリンクする方法を説明しましたが、通常、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ディレクトリの中)にわたる指定。
まとめ
- ディレクトリの区切りには「/」(スラッシュ)を使用