「フォルダ」とパス指定

「ファイル」の量が多くなると、「何のファイル」か、また「編集したいファイルがどこにあるのか」分からなくなってきます。

これらの分類・整理をするためには「フォルダ」の概念が必要です。

【注意】
WindowsやMac OSでは「フォルダ」と呼びますが、UNIXやMS-DOSでは同様の概念を「ディレクトリ」と呼びます。

「フォルダ」とは、ファイルを分類・整理するための保管場所です。

家の中に様々なものが散らかっているとします。この時普通はどうするでしょう。通常は「雑誌は本棚」「おもちゃはおもちゃ箱」「文房具はペン入れ」のように「分類」して収めると思います。

Web ページを作成する上でも、「文書」や「画像」などに「分類」して別々に保存しておく方が、編集や見直すときに便利になってきます。

フォルダには識別のために「フォルダ名」をつけます。また、フォルダの中にさらにフォルダを作成することもできます。このような階層構造によって細かい分類を表現します。

Web ページをWebサーバ上に「転送」した際には、通常「public_html」と言うフォルダに格納します。

コンピュータ上のすべてのファイルは必ずどこかのフォルダに所属し、ルートフォルダ以外のフォルダは、必ず他のフォルダに所属しています。

このような構造を、木の枝の分かれに似ていることから「ツリー(tree)型構造」と呼びます。Web ページを作成する場合のツリー型構造の例を次に示します。

それでは、次に「profile」というフォルダから、「img」というフォルダの中にある「top.gif」という画像を呼び出す方法を見ていきます。

「top.gif」と言う画像は「img」と言うフォルダに保管されています。画像を使用するのに、カレントフォルダ内のファイルであれば、次のように呼び出す事ができます。
<img src="top.gif">

しかし、今回は「img」フォルダ内にあるため、「パス」という概念を理解しなければなりません。

「パス」とは、ファイルがどこにあるかを指定する方法のことです。「パス」には2種類の指定方法があり、それぞれ「絶対パス」と「相対パス」と呼ばれます。

パス	説明
相対パス	自分がいる場所(カレント)からファイルの場所を指定
絶対パス	ファイルの場所を一番上(ルート)から指定

理解しやすいのは「絶対パス」です。例えばネット上で「top.gif」だけを直接呼び出す場合は、次のようにブラウザの「アドレス」に入力します。
http://www.○○○.○○.○○/~△△/img/top.gif

これを「絶対パス」といい、img要素で「top.gif」画像を呼び出すには、次のような方法となります。

<img src="http://www.○○○.○○.○○/~△△/img/top.gif">

この「絶対パス」は、主に他のWeb ページとリンクを貼るときなどに利用されます。

「相対パス」では、現在の場所（カレント）を基準として、次に示す表記を利用して「top.gif」の位置を指定する必要があります。

フォルダ	説明	表記
カレントフォルダ	現在作業しているフォルダ「profile」	.
親フォルダ	作業しているディレクトリの一つ上のフォルダ「public_html」	..
サブフォルダ	作業しているディレクトリの一つ下のフォルダ「hoby」	省略
ホームフォルダ	個人個人のためのフォルダ	~△△

例えば「profile.html」から「top.gif」を参照したい場合は、次のような道順を辿ります。

「profile.html」→「profile」→「public_html」→「img」→「top.gif」

上記のように、直接「top.gif」には行けません。これを「表記」を利用すると次のように記述できます。
<img src="../img/top.gif">

これは、「カレントフォルダ（profile）から、親フォルダ（public_html）に移動して、サブフォルダ（img）の「top.gif」を呼び出す」という意味になります。

オススメ書籍