パスの指定方法

[新着] Webテンプレートを仮オープンしました


絶対URLと相対URLの違いや、それぞれの指定方法に関する説明です。


パスとは

パス」とは、ファイルなどの場所を示すための文字列です。リンクを設定する場合や画像などのファイルを読み込む場合には、対象のファイルをパス(URL)で指定することになります。

リンクの例:
<a href="html_tag/index.html">Webサイト制作</a>

画像読み込みの例:
<img src="image/demo.gif" alt="デモ画像">

それぞれ html_tag/index.htmlimage/demo.gif の部分がパスになります。

絶対URLと相対URLの使い分け

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

絶対URL
http:// から始まる指定方法です。別サイトにリンクする場合などは、この方法で指定します。

相対URL
現在地を基準とした相対的な指定方法です。サイト内のページへリンクする場合などは、この方法で指定します(絶対URLでも指定できますが、通常は相対URLで指定します)。

絶対URLの指定方法

対象となるファイルの場所を、http:// から記述します。

例えば、今見ているこのページの絶対URLは、次の内容になります。(ブラウザのアドレスバーに表示されている内容です)

http://www.tagindex.com/html_tag/basic/path.html

相対URLの指定方法

現在地(リンク元のページ、または画像を表示させるページ)を基準として、対象となるファイルの場所を相対的に指定します。

現在地と対象ファイルとの位置関係により、記述方法は次のようなパターンに分けられます。

リンク時の例
<a href="index.html">
<a href="./index.html">
同じフォルダ内にリンクするときは、ファイル名のみ(または ./ に続けてファイル名)を記述します。
<a href="example1/index.html">
<a href="example1/example2/index.html">
下位の階層にリンクするときは、フォルダ名に続けて / を入れ、ファイル名を記述します。
<a href="../index.html">
<a href="../../index.html">
上位の階層にリンクするときは、../ に続けてファイル名を記述します。../ は、ひとつ上の階層を指定するものです。2つ上の階層を指定するときは、../ を2つ入れてからファイル名を記述します。
<a href="../example/index.html"> 同じ階層の別フォルダにリンクするときは、../ に続けてフォルダ名と / を入れ、ファイル名を記述します。


[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版