リンクなどのパスの指定
「パス」とはファイルなどの場所を示すためのものです。
リンクや画像ファイルの場所を指定するときに使用します。
[参考記事] 別のページへのリンク 同ページ内のリンク 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="">
これは入力フォームなどで同一ファイルに移動する場合に使用します。
(このときプログラム側の処理で動作・表示を変更する。)
関連記事
- HTMLの構造
- 文字コードの指定
- HTMLファイルを作って、ブラウザで表示してみる
- 『開始タグ』と『閉じタグ』
- テキストに意味づけをする マークアップ
- 子要素として許可される要素 内包可能要素
- ブロック要素(ブロックレベル要素)とインライン要素
- 見出し H1 H2 H3 H4 H5 H6
- 文章のまとまり、段落 P ADDRESS BLOCKQUOTE
- 表組みを作成する TABLE TH TD
- リストを作成する UL OL DL
- 横罫線を引く HR
- 改行する BR
- 文章中のテキストに意味を付ける インライン要素のマークアップ
- テキストの装飾をする
- 上付き文字、下付き文字を表示する SUP SUB
- 追加された部分、削除された部分であることを示す INS DEL
- 別のページへのリンク 同ページ内のリンク A
- 他のページを参考にする ソースを見る
- 画像を設置する IMG
- HTML特殊文字 HTMLエスケープ 実体参照
スポンサーリンク