リンクなどのパスの指定

「パス」とはファイルなどの場所を示すためのものです。
リンクや画像ファイルの場所を指定するときに使用します。

[参考記事] 別のページへのリンク 同ページ内のリンク A
[参考記事] 画像を設置する IMG

URLとURI
絶対パスと相対パス
パスの指定を / で終わらせた場合
同ページへのリンク

リンクの場合

<a href="sample.html">リンクテキスト</a>

画像の場合

<img src="sample.jpg" />

URLとURI

HTML4.01 では、URL(Uniform Resource Locator)の概念を拡張して URI(Uniform Resource Identifiers - RFC2396)という仕様を取り入れています。
URL が、リソースの物理的な場所を示すのに対し、URI はリソースの仮想的な名前を定義します。

絶対パスと相対パス

パスの指定方法には、「絶対パス」による指定と「相対パス」による指定があります。

絶対パス

絶対パスはどのページ(ファイル)から見ても変わらないパスの指定方法です。

URL全てを記述する
http://www.example.com/test/sample.html

<a href="http://www.example.com/test/sample.html">

同ドメインで同ポートであれば(http://www.example.com部分まで同じなら)
/test/sample.html

<a href="/test/sample.html">

という書き方もできます。
この書き方の場合は、サイトのドメインが変更になっても対応できるので、同サイト内の絶対パスはこの書き方をするようにします。

例 サイトのトップページへのリンク

<a href="/">

SSLページから非SSLページ、非SSLページからSSLページの場合は、http:やhttps:などから書く必要があります。

またBASEタグを使用すると、基準となるサイトを変更することができます。
<BASE> 基準URIを指定する

これはGoogleの検索結果にある『キャッシュ』のページで使用されています。

[参考記事] 他のページを参考にする ソースを見る

相対パス

アクセス中のページを基準とした相対的なパスの指定方法です。
このパスの指定方法では、リンク元のページ(ファイル)とリンク先のページ(ファイル)の相対位置が変わらなければ、同じパスの指定になります。
このため同サイト内の同カテゴリのページ遷移などは、この指定方法をすることが多いです。
ファイルの位置を変更する場合には、通常はカテゴリ単位で移動するからです。


相対パスの指定方法

親階層
index.html
sample01.html
フォルダ「test01」
sample02.html
フォルダ「test02」
フォルダ「test03」
sample03.html
┬ index.html
│
├ sample01.html
│
├ フォルダ「test01」
││
│└ sample02.html
│
└ フォルダ「test02」
 │
 └┬ フォルダ「test03」
  │
  └ sample03.html
同階層(同一フォルダ内へのリンク)

『ファイル名のみ』または『./の後にファイル名』

例 index.htmlを基準にした場合のsample01.html

<a href="sample01.html">
<a href="./sample01.html">
1階層上(1フォルダ上へのリンク)

『../の後にファイル名』

例 sample02.htmlを基準にした場合のsample01.html

<a href="../sample01.html">
1階層下(1フォルダ下へのリンク)

『フォルダ名の後に / を付けてファイル名』

例 index.htmlを基準にした場合のsample02.html

<a href="test01/sample02.html">
<a href="./test01/sample02.html">

それ以外はこれを組み合わせた指定方法になります。

2階層上(2フォルダ上へのリンク)

『../../の後にファイル名』

例 sample03.htmlを基準にした場合のsample01.html

<a href="../../sample01.html">
2階層下(2フォルダ下へのリンク)

『フォルダ名の後に / を付けてフォルダ名の後に / を付けてファイル名』

例 index.htmlを基準にした場合のsample03.html

<a href="test02/test03/sample03.html">
<a href="./test02/test03/sample03.html">

相対パスはアクセス中のページを基準としたものですが、 BASEタグを使用すると、基準となる位置を変更することができます。
<BASE> 相対パスの基準URIを指定する

パスの指定を / で終わらせた場合

パスの指定を / で終わらせた場合は、webサーバ内部で、index.htmlなどのファイル名が補完されます。

<a href="../">
  ↓
<a href="../index.html">

これはwebサーバの設定によって異なり、補完されるファイル名はindex.htmlではない場合もあります。

Apacheでは設定ファイル httpd.conf の DirectoryIndex で設定されています。

DirectoryIndex index.html

またこの補完はwebサーバによって行われるため、ローカルにあるファイルをブラウザで開いたときには index.htmlなどは補完されません。
このときフォルダ内のファイル一覧が表示される場合があります。

webサイト製作の現場では、HTMLのコーディングをするコーダーはローカルで確認して、クライアントにもローカルで確認してもらうためindex.htmlを記述しているケースが多いです。
しかしindex.htmlからindex.phpなどに変更になることもあるため(特にTOPページのファイル)、サーバへアップするときはリンクのindex.htmlははずして公開したほうがいいです。

同ページへのリンク

次のようにリンクのパスに何も記述しないと、同ページへのリンクとなります。

<a href="">

これは入力フォームなどで同一ファイルに移動する場合に使用します。
(このときプログラム側の処理で動作・表示を変更する。)

関連記事

スポンサーリンク

FireFoxでinnerHTMLを使うときの注意点

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る