ＨＴＭＬ－相対パス・絶対パス－　　－ＨＴＭＬの基礎

相対パス・絶対パス

■ＵＲＬの相対パス指定・絶対パス指定について

パスの指定についての質問が意外と多いので、ここではＵＲＬの相対・絶対パスの指定について述べます。これらはウェブページを作成する際に必要な知識です。初心者にもわかりやすくする為、用語を本来とは違った表現で記述することもあります事をご了承下さい。

始めに、パスについて軽く説明しておきます。
パスとはアドレスの記述や表記の方法で、コンピュータ内での場所をパスといい、パスを記述した文字列をパス名といいます。

・相対パス・絶対パス
・相対パス指定でのリンクの張り方
・相対パス指定と絶対パス指定の使い分け

■　相対パス・絶対パス

例えば、○○区××町の△△マンションという３階建てのマンションがあり、Ａさんが２階にいたとします。友人のＢさんは３階に住んでおり、Ｃさんという人は１階に住んでいます。ここでは、Ａさん中心に考えてください。

Ｂさんの住所は　→　○○区××町△△マンション３階
Ａさんの住所は　→　○○区××町△△マンション２階
Ｃさんの住所は　→　○○区××町△△マンション１階

となりますね。
Ａさんの友人Ｄさんがいたとしましょう。Ｄさんはこのマンションには住んでいません。ＡさんがＤさんに、ＢさんとＣさんの居場所を説明する際２通りの説明の仕方があります。

Ａさんが住んでいる階から見た説明方法（上の階、下の階）
○○区××町△・・のように住所を全て説明する方法

この２つの場所の指定方法こそが、相対パスと絶対パスの考え方です。これらをそっくりファイルやフォルダに置き換えて考えてみましょう。

１階　→　cccフォルダ　　c.html（Ｃさん）・・ＨＴＭＬファイル
２階　→　aaaフォルダ　　a.html（Ａさん）・・ＨＴＭＬファイル
３階　→　bbbフォルダ　　b.gif（Ｂさん）・・ＧＩＦファイル（画像）

やはりここでもＡさんを起点に考えてください。
a.html（Ａさん）からc.html（Ｃさん）のアドレスを説明するとき、「Ａさんの下の階」と言えばわかります。それならばＢさんは「Ａさんの上の階」ですね。このように、今現在いる場所（閲覧しているページ）を起点に、相手の場所（目的のファイル）までの道筋を相対的に考えるのが、相対パスです。

そして、Ａさんの居場所に関係なく、Ｃさんの住所を○○区～と説明するようにアドレスをhttpから全て記述する考え方を絶対パスといいます。絶対パスは当然ながら、ひとつのファイルにひとつしか存在しません。

PAGETOP

では実際に相対パスでa.htmlからc.htmlへリンクを設定する際に、絶対パスでは、アドレス全て（フルパス）を記述（http://ykr.main.jp/bbb/aaa/a.html など　※注　実在しません）すればいいのですが相対パスではどのように記述すればいいのでしょう？

■ファイルやフォルダは下記のような位置関係
相対パス・絶対パス"
・bbbフォルダにb.gifがあり
　その下に（bbbフォルダ内に）
　aaaフォルダがあります。
　▼
・aaaフォルダには、a.htmlがあり、
　その下に（aaaフォルダ内に）
　cccフォルダがあります。
　▼
・cccフォルダにはc.htmlが
　あります。
ここでは、bbbフォルダの中にある、aaaフォルダ内に置かれているa.htmlを起点にして上下のファイルやフォルダへの関係を見てください。

PAGETOP

■　相対パス指定でのリンクの張り方

a.htmlからc.htmlにリンクを張りたいとします。リンクを貼るタグは<a></a>なので、このタグのhref属性に、フルパス（絶対パス）を記述してリンクを張っても良いのですが、いくつもリンクを張りたい場合などに、いちいちフルパスを記述するのは面倒です。なので、相対パスを記述します。それぞれのファイルのフルパスを以下のように設定しておきます。（実在しません）

■　b.gifのURL

http://ykr.main.jp/bbb/b.gif

■　a.htmlのURL

http://ykr.main.jp/bbb/aaa/a.html

■　c.htmlのURL

http://ykr.main.jp/bbb/aaa/ccc/c.html

そしてここではa.htmlを起点とします。
このa.html内のテキストからc.htmlに絶対パスの記述でリンクを張ります。

<a href=" http://ykr.main.jp/bbb/aaa/ccc/c.html"> a.html内のテキスト</a>

▼　▼　これを相対パスで記述すると・・・

<a href=" ccc/c.html"> a.html内のテキスト</a>
　or
<a href="./ccc/c.html">a.html内のテキスト</a>

PAGETOP

同じように、今度はa.html内に、b.gif（画像ファイル）を表示させたいとします。以下のソースは上が絶対パスでの記述、下が相対パスでの記述です。

「/」はフォルダとフォルダの区切りです。
「./」は今現在いる場所を指します。ここで今いる場所というのは a.htmlのあるフォルダ、aaaフォルダのことですね。（aaaディレクトリといいます） aaaフォルダ内のa.htmlは「./a.html」、また今現在いる場所の「./」は省略する事ができます。 a.htmlから見たc.htmlは、a.htmlが置かれているのと同じフォルダにある cccフォルダの中に置かれているc.htmlという事になります。

.　　　　　　←　今現在いる場所（省略可能）
./a.html　　　　←　今いる場所にあるa.html（./は省略可能）
./ccc　　　　←　a.htmlと同じ場所にあるcccフォルダ
./ccc/c.html　　　　←　a.htmlと同じ場所にあるcccフォルダの中にあるc.html

それでは、起点として考えるa.htmlよりも上の階層にあるフォルダ内にある、ファイルを参照する場合にはどうやって記述するのでしょうか。
「.」は現在いる場所を指しましたね。現在いる場所（フォルダ）よりも上の階層にあるフォルダ、現在いる場所がaaaフォルダですから、aaaフォルダが入っている bbbフォルダを指す場合には、「..」と記述します。 a.htmlのひとつ上のフォルダにあるb.gifを表すには「../b.gif」とします。ちなみに、さらに bbbフォルダよりも上の階層を指そうとするなら「../..」となります。

.　　　　←　今現在いる場所（aaaフォルダ内）
..　　　　←　aaaフォルダよりもひとつ上にあるフォルダ内の場所（bbbフォルダ内）
../b.gif　　　　←　aaaフォルダよりもひとつ上にあるbbbフォルダにあるb.gif

PAGETOP

■　相対パス指定と絶対パス指定の使い分け

実際にウェブページを作成時にＵＲＬを記述する際は、相対パスを絶対パスを使い分けて記述します。サイトを作成すると複数のファイルを管理する事になりますが、自サイト内でリンクを張る場合は相対パスで記述したほうが楽ですし、移動させるときも全てのファイルが入ったフォルダごと動かすだけで済みます。起点となるファイルから見たパスの記述になるので、ファイル同士の位置関係自体は変化しないという訳です。

一方、絶対パスでＵＲＬを記述する必要がある場合というのは、自サイトから他のサイトへのリンクを張ったりする時です。相対パスだとややこしくなりますし、自分のファイルを動かすとその度にファイルの位置関係が変わってしまいます。絶対パスの指定は、Ａさんが引っ越したとしてもＣさんがマンションの１階に住んでさえいれば、ＡさんとＣさんの位置関係（上の階と下の階）は変化しますが、住所を指定すれば、Ｃさんに郵便物が届くのと同じ事です。

長くなりましたが、慣れれば簡単です。（階層概念といいます）これらを上手く活用してウェブページ作成を楽しんでください。

PAGETOP

メール

質問メールがとても多くなった為、現在返信が遅れております。お返事が出来ていないものも沢山あり、今のところいつになるのか・必ず返信出来るのかどうかの保証が出来ません。申し訳ございませんが、その事をご理解いただいた上でご送信下さい。また、ここではHTMLの質問に関してのみ受け付けております。

メールはこちらから：ykrmain★★★eay.jp

PAGETOP

Webページ作成の為のＨＴＭＬを解説しています。★本サイトにはプロモーションが含まれています★

　Webページ作成の為のＨＴＭＬを解説しています。★本サイトにはプロモーションが含まれています★