フォルダ内の位置で指定するので、サーバーを移転しても変更しなくていいので楽です。
例えば、むりょっちゃお！(tocopoco.com)は↓の図のようなファイル構成になっています。
絶対パスと相対パス
リンク先の書き方として「絶対パス」と「相対パス」の2種類があります。
ここではその違いと設定方法を説明します。
◇絶対パス
「絶対パス」とは、リンク先のURLを http:// から全部書いて設定します。
絶対パスで書くとどのページからも必ず同じリンク先に飛びます。
例えば、<a href="http://tocopoco.com/tag/tag.htm">むりょっちゃお！タグ集</a> とすると
どのページからも必ずこのタグ集のページにリンクされます。
絶対パスは他の人のHPや他のサーバーにUPしてあるファイルにリンクする時に使います。
◇相対パス
絶対パスに対して「相対パス」は、リンク元ページを基準にファイルの位置を設定します。
フォルダ内の位置で指定するので、サーバーを移転しても変更しなくていいので楽です。
例えば、むりょっちゃお！(tocopoco.com)は↓の図のようなファイル構成になっています。
| 同じフォルダ内のファイルにリンクする場合は href="ファイル名" 、 下のフォルダにあるファイルにリンクする場合は href="そのフォルダ名/ファイル名" 、 上のフォルダにあるファイルにリンクする場合は href="../ファイル名" で設定します。 ↓にいくつかリンク例を挙げてみたので、参考にしてください |
||||
| リンク元 | → | リンク先 | 書き方 | 説明 |
| tocopoco.com index.htm |
→ | tocopoco.com about001.htm |
<a href="about001.htm">〜</a> | 同じフォルダ内のファイルにリンク |
| tocopoco.com index.htm |
→ | tag tag.htm |
<a href="tag/tag.htm">〜</a> | １個下のフォルダ内にリンク フォルダ名/ファイル名 |
| tocopoco.com index.htm |
→ | sample frame001.htm |
<a href="tag/sample/tag.htm">〜</a> | ２個下のフォルダにリンク フォルダ名/フォルダ名/ファイル名 |
| tag tag.htm |
→ | tocopoco.com index.htm |
<a href="../index.htm">〜</a> | １個上のフォルダ内にリンク ../ファイル名 |
| sample frame.htm |
→ | tocopoco.com index.htm |
<a href="../../index.htm">〜</a> | ２個上のフォルダ内にリンク ../../ファイル名 |
| tag tag.htm |
→ | aaftools index.htm |
<a href="../aaftools/index.htm">〜</a> | 違うフォルダ内にリンク ../フォルダ名/ファイル名 |
| tag tag.htm |
→ | lecture lecture.htm |
<a href="../aaftools/lecture/lecture.htm">〜</a> | 違うフォルダ内にリンク ../フォルダ/フォルダ/ファイル名 |
| sample frame.htm |
→ | lecture lecture.htm |
<a href="../../aaftools/lecture/lecture.htm">〜</a> | 違うフォルダ内にリンク ../../フォルダ/フォルダ/ファイル名 |
フォルダ/フォルダ/フォルダ/フォルダ/・・・とつなげればどこまでも下のフォルダ内のファイルにリンクできますし、
../../../../../・・・とつなげればどこまでも上のフォルダ内のファイルにリンクできます。
・・・とここで注意。
相対パスは位置関係で設定しているため、間違うと違うページへ飛んだりしてしまいます。
例えばlectureのlecture.htm→tocopoco.comのindex.htmにリンクしたい時、
href="../../index.htm" が正解なのに、 href="../index.htm" と
間違えて書いてしまうとaaftoolsのindex.htmにリンクされてしまいます。
公開する前にきちんと目的のページにリンクされているか確認しましょう！
(C) 無料でWEBサイトを作っちゃお！poco, All rights reserved.