2018/11/29ディレクトリ、フォルダのパスの理解を深めよう勉強を含め、WEB開発に関する情報に触れて初めて、ディレクトリという言葉を聞いたという人も多いかと思います。フォルダもディレクトもほぼ同じ意味を持つので、ディレクトリという言葉を聞いたらフォルダのことを言っているんだなと思ってください。ここでは、WEB開発で最低限知っておかなければならないフォルダとディレクトリについて説明を行っています。WEB開発でのフォルダ名/ファイル名のつけ方ディレクトリ、フォルダのパスとはWEBに関わらずコンピューターの世界では、ファイル、フォルダが存在している場所を示す時パスという言葉を使用します。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”となります。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”>と記述します。src=”image/house2.jpg”>となります。src=”image/building/house3.jpg”>となります。src=”../house4.jpg”>となります。ポイントは、“..”で、階層構造で上の階層は一つしか存在しないため、フォルダ名を指定するわけではなく、“..”で上の階層を表します。src=”../../house5.jpg”>となります。WEB開発でのフォルダ名/ファイル名のつけ方フォルダ名には、英語を使用して、日本語は使用しません。imgといった英語を使用してフォルダを作成します。ファイルの種類ごとにフォルダを作成しますスタイルシートの場合は、cssフォルダを作成し、その下にstyle.cssファイル等を保存します。javascript場合は、jsフォルダを作成し、その下に保存していきます。数枚程度の画像であれば、imageフォルダを作成して、その下にすべての画像を保存すれば問題ないですが、画像が増えてくるとimageの下にtop用のフォルダを作成したり、ページのパーツ毎にフォルダを作成するとファイルの管理が楽になります。WEB開発でのフォルダ名/ファイル名のつけ。