タイトル画像
サイトタイトル画像

「フォルダ」とパス指定

「フォルダ」とパス指定

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

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

【注意】
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」を呼び出す」という意味になります。

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since 2000/08/10)