勉強を含め、WEB開発に関する情報に触れて初めて、ディレクトリという言葉を聞いたという人も多いかと思います。フォルダもディレクトもほぼ同じ意味を持つので、ディレクトリという言葉を聞いたらフォルダのことを言っているんだなと思ってください。ここでは、WEB開発で最低限知っておかなければならないフォルダとディレクトリについて説明を行っています。

ディレクトリ、フォルダのパスとは

WEBに関わらずコンピューターの世界では、ファイル、フォルダが存在している場所を示す時パスという言葉を使用します。例えば、htmlファイル内のimgタグ<img src=”image/house.jpg”>を記述した場合、image/house.jpgにあたる箇所がファイルの保存場所を示しているので、パスと呼ばれます。

パスという言葉は、IT業界ではよく使われ、”XXXファイルどこに保存されているのかパス教えて”とか”画像が表示されないけどパス間違っているかな”といった使い方をよく耳にします。

絶対パスと相対パス

パスには、絶対パスと相対パスが存在して、現在の位置(作業フォルダ)から見ている場合と、階層構造の一番上から見ている場合によって、パスの指定方法が変わってきます。

今デスクトップ上にindex.htmlファイルを作成し、同じデスクトップ上にimageフォルダを作成し、その中にhouse.jpgを保存したとします。

絶対パスと相対パスの視点

【相対パス】
デスクトップにあるindex.htmlを中心に、house.jpgを見た場合のパスは、image/house.jpgで相対パスとなります。

【絶対パス】
Windowsでは、Cドライブを頂点にUsersフォルダ、ユーザ名フォルダ、デスクトップフォルダ、imageフォルダと階層構造になっており、その下にhouse.jpgファイルが存在するので、絶対パスは、”C:/Users/Kazu/Desktop/image/house.jpg”となります。

Cドライブのことをルートディレクトリとも呼びます

相対パスでimgタグを使用した場合は、<img src=”image/house.jpg”>、絶対パスで指定した場合は、<img src=”C:/Users/Kazu/Desktop/image/house.jpg”>となります。

公開ディレクトリとパスの関係

先ほどの説明で、PC上で開発作業を行っている時は、絶対パスはCドライブから始まりましたが、WEBサーバを使用してhtmlファイルを公開する場合は、どの位置のディレクトリ以下を公開するのか公開ディレクトリを決める必要があります。

もしpublicディレクトリ以下を公開ディレクトリにした場合は、階層構造の一番上にあたるディレクトリがpublicになり、その場所を頂点として絶対パスを設定することになります。

publicの下にimageディレクトリを作成し、その下にhouse.jpgとした場合の絶対パスは、”/image/house.jpg”となります。頭にルートディレクトリである”/”をつける必要があります。

公開ディレクトリとパス

ファイルの指定方法

index.htmlファイルを中心に相対パスとして画像のパスの設定を行います。

パスの指定方法

同じフォルダのファイルの指定方法

同じフォルダの中にhouse1.jpgがある場合は、<img=”house1.jpg”>と記述します。

下の階層のフォルダにあるファイルの指定方法

imageフォルダの下にhouse2.jpgがある場合は、<img src=”image/house2.jpg”>となります。imageフォルダの下にbuildingというフォルダがあり、その下にhouse3.jpgがある場合は、<img src=”image/building/house3.jpg”>となります。

上の階層のフォルダにあるファイルの指定方法

下の階層ではなく、上の階層にhouse4.jpgがある場合は、<img src=”../house4.jpg”>となります。ポイントは、“..”で、階層構造で上の階層は一つしか存在しないため、フォルダ名を指定するわけではなく、“..”で上の階層を表します。そのさらに上の階層の場合は、“../../”を使い、<img src=”../../house5.jpg”>となります。

WEB開発でのフォルダ名/ファイル名のつけ方

  • フォルダ名には、英語を使用して、日本語は使用しません。
    画像用フォルダを作成する場合は、image, imgといった英語を使用してフォルダを作成します。

  • ファイルの種類ごとにフォルダを作成します
    スタイルシートの場合は、cssフォルダを作成し、その下にstyle.cssファイル等を保存します。javascript場合は、jsフォルダを作成し、その下に保存していきます。

  • ファイルが増える場合は用途ごとに分けて作成
    数枚程度の画像であれば、imageフォルダを作成して、その下にすべての画像を保存すれば問題ないですが、画像が増えてくるとimageの下にtop用のフォルダを作成したり、ページのパーツ毎にフォルダを作成するとファイルの管理が楽になります。