4-6 相対パス、絶対パスとは
リンクの張り方には「相対パス」と「絶対パス」の二種類があります。主に「相対パス」は自分のサイト内のページを移動する際に使用し、「絶対パス」は他のサイトのへリンクを張る時に使用致します。
[ 関連事項 : HP-TIPS > CGI > CGIの基礎知識 > 相対パス・絶対パス ]
4-6-1 相対パス
- ./
- 同じディレクトリ内 (特に指定せずファイル名を直接書く場合も同じ意味です)
- ../
- 一つ上のディレクトリ
- ../../
- 二つ上のディレクトリ
- フォルダ名/ファイル名
- 一つ下のディレクトリ
- フォルダ名/フォルダ名/ファイル
- 二つ下のディレクトリ
下記のような構成のサイトがあった場合、
- index.html から top.html にリンクを張る場合
index.html の BODY部分に下記のように記述致します。<a href="top.html" title= "TOPに行きます">TOP</a>「./top.html」と書いてもOKですが、同じ階層にあるファイルにリンクを張る場合は 『そのままファイル名』 を書いた方が判り易いかと思います。 - top.html から link.html にリンクを張る場合
top.html の BODY部分に下記のように記述致します。<a href="link/link.html" title= "LINKに行きます">LINK</a>一つ下のディレクトリ(フォルダの事です)にリンクを張る時は、『フォルダ名/ファイル名』 と指定すればOKです。 - top.html から spring.html にリンクを張る場合
top.html の BODY部分に下記のように記述致します。<a href="photo/hana/spring.html" title= "写真コンテンツの春のページに行きます">SPRING</a>二つ下のディレクトリにリンクを張る場合も一つの時と同様に、『フォルダ名/フォルダ名/ファイル名』 と、一つフォルダ名を追加して指定すればOKです。 - link.html から top.html にリンクを張る場合
link.html の BODY部分に下記のように記述致します。<a href="../top.html" title= "TOPに戻ります">TOP</a>一つ上のディレクトリにリンクを張る時は、『../ファイル名』 と指定すればOKです。 - spring.html から top.html にリンクを張る場合
spring.html の BODY部分に下記のように記述致します。<a href="../../top.html" title= "TOPに戻ります">TOP</a>二つ上のディレクトリにリンクを張る時は、『../../ファイル名』 と指定すればOKです。
- 「相対パス」はスラッシュ(/)から始まらないのが特徴です。
- 自サイト内にも「絶対パス」を利用する事は出来ますが、
サイトを移転した際に全てのURLを書き換え無いといけない事態になってしまいます。他のサイトのアドレスを張る以外は、出来るだけ「相対パス」をご利用下さい。[ 関連事項 : HP-TIPS > HPの作り方 > 画像が出ない場合 ]
[ 関連事項 : HP-TIPS > CGI > CGIの基礎知識 > 相対パス・絶対パス ]
4-6-2 絶対パス(フルパス)
- / (スラッシュ)から始まる物
- http:// から始まる物の2種類あります。
HTML文章で記載する際はほとんど(2)の「http://~」だと思って下さっても構いません。
<a href="http://www.google.com/intl/ja/" title= "検索サイトのグーグルに飛びます">Google</a>
Google
(クリックすると実際にグーグルに飛びます)。herf属性の中に「http://~」から始まるURLを記載して下さい。
/ (スラッシュ)から始まる絶対パスはCGIを使用したい方は覚える必要がありますが、HTML文章でリンクを張る際には余り必要ありませんので、こちらでの説明は省きます。
[ 関連事項 : HP-TIPS > CGI > CGIの基礎知識 > 相対パス・絶対パス ]