ウェブ木箱：HTML講座-絶対パスと相対パス

☆絶対パスと相対パス - クイックガイド

		index.html - Kobako Editer
	<html> <head> <title>相対パス</title> </head> <body> <a href="../index.html">トップへ</a> <img src="image/pic.html" alt="写真"> </body> </html>


		１．	絶対パスと相対パス


		２．	相対パスの割り出し方


		３．	アップロードする時の注意


		４．	相対パスでの記号

ここで言っているパスとはHTMLでリンクを張ったり画像を貼りつけたりする際にファイルがどこにあるかを示すためのもの。

パスには絶対パスと相対パスがあるよ。

絶対パスとはネット上で言うならURLがそれにあたる。実際の建物に例えてイメージするなら、『○○県△△市□□１番地』といった住所のような感じ。同じ住所は１つしかないわけだから必ず同じところに辿りつくってわけだね。

対して相対パスの方は、あるファイルからみて対象となるファイルがどこにあるかというもの。これも建物に例えるなら、『お隣の○○さん』とか『この先の角を曲がった突き当たりの△△さん』などある場所を基点としての場所の示し方になる。同じ『お隣さん』でも基点とする場所によってどこを指すかが変ってくるという事だね。

	homepage
`├`		image
`│`	`├`		itiran.html
`│`	`├`		pic1.gif
`│`	`└`		pic2.gif
`├`		html
`│`	`├`		sample
`│`	`│`	`└`		sample.html
`│`	`└`		kouza.html
`└`		index.html

相対パスとは上でも説明した通り、あるファイルからみた他のファイルの場所のこと。各ファイルの位置関係は右の図のようになっていると仮定して説明するね。

初級編でも紹介した通り同じフォルダ内のファイルならファイル名だけでパスを表現できる。例えばitiran.htmlからみたpic1.gifの相対パスは『pic1.gif』と表現できる。

次は他のフォルダに入っているファイルまでのパスを割り出してみよう。例えばindex.htmlからみたpic2.gifの相対パス。 index.htmlファイルからスタートして pic2.gifまでに辿りつく経路を考えてみよう。まずは同じフォルダ内のimageフォルダ、そしてその中のpic2.gifファイルに辿りつくよね。この経路を/(スラッシュ)で区切って並べると相対パスになる。なのでこの場合の相対パスは『image/pic2.gif』となるわけだね。同様にindex.htmlからsample.htmlの相対パスなら『html/sample/sample.html』となる。よくわからない場合は右の図の線を辿りながら確認してみてね。

ではitiran.htmlからindex.htmlへの相対パスはどうだろう。現在位置がimageフォルダの中なのでそこまで辿りつくにはimageフォルダから上に上がらないといけないね。フォルダを１つ上に上がるには../(ドット２つにスラッシュ)と書くよ。１つ上がったところのフォルダ内のindex.htmlという事で相対パスは『../index.html』となる。

位置関係が複雑になっても基本はこれだけ。 itiran.htmlからみたsample.htmlの相対パスなら『../html/sample/sample.html』となる。

相対パスを使ってHTMLを書いた場合はサーバにアップロードした時にファイルの位置関係を維持しなくちゃならない。わかりやすくいえばサーバ側にもフォルダ(ディレクトリ)を作って同じような形にしてやればOK。転送に使用するFTPソフトにもよるけどフォルダごとアップしようとすれば自動的にサーバ側にもフォルダを作ってくれるよ。

すでに紹介した../(ドット２つにスラッシュ)の他にも相対パスで特別な意味を持つ記号があるよ。 ./(ドット１つとスラッシュ)なら同じフォルダを、 /(スラッシュ)ならルートディレクトリを指す。詳細はややこしくなるのでここでは省略させてもらうけど、ドットの数を間違えると意味がまったく違ってしまうので相対パスを使う際は注意してね。

	基本編
	HTML講座テーマ別