フォルダ間のリンク方法

omiyoフォルダ
 |-index.html
 htmlフォルダ
  |-html_index.html
  |-hello.html
 aspフォルダ
  |-asp_index.html


こんなカンジです↓

フォルダ階層の図





まずは、同じフォルダ内でリンクを貼ってみよう。

htmlフォルダ内の二つのファイル間でリンクを貼るには...

html_index.htmlからhello.htmlへ飛ぶ場合:

<a href="hello.html">リンクします。</a> と記述すると、

リンクします

と表示されます。

もう、わかった方もいらっしゃるかもしれませんが、リンクを貼る時は
<a href="ファイル名">表示したい文字</a>
となります。これは画像ファイルの時も同じです。





index.htmlからhtml_index.htmlにリンクを貼る時は?


次は、上の階層から下の階層のファイルにリンクを貼るにはどうしたらいいか、ですが。

<a href="html/html_index.html">リンクします。</a>

となります。

html/というのが増えているだけです。
これは、htmlフォルダの下ということを表していると考えてください。

ですから、例えばaspフォルダの下にhtml_index.htmlファイルがあった場合には、
<a href="asp/html_index.html">リンクします。</a> となります。





html_index.htmlからindex.htmlにリンクを貼る時は?


今度は、下の階層から上の階層のファイルにリンクを貼るにはどうしたらいいか、です。

<a href="../index.html">リンクします。</a>

となります。

../というのが増えているだけです。
これで一つ上の階層へ移動したと考えてください。

別の場所にいるファイルへは一気に飛ぶ事は出来ません。
まずは、どこにいるのか場所を指定してやらなくてはならないのです。







asp_index.htmlからhtml_index.htmlにリンクを貼りたい時。


最後に、別のフォルダにあるファイルにリンクを貼るにはどうしたらいいか、なのですが。

<a href="../html/html_index.html">リンクします。</a>

となります。

上の2つを合わせたものになってます。。
まず、htmlフォルダがある場所まで移動して、その後htmlフォルダに入ってファイルが
ある場所まで移動した後、ファイルを指定しています。
今回の場合は、htmlフォルダの直下にファイルがあったので、html/のすぐ後にファイル名がきてますが、これがもっと下のほうにある場合は、ひたすら潜っていくことになります。







Next