記事の内容
フォルダ（ディレクトリ）構造とは？
Webサイトを構成するフォルダやその中に格納されているファイル群の構成のことです。
普段みなさんが使用しているパソコンの中にあるフォルダやファイルの集まりがそれにあたります。
Webサイトのフォルダ構造はどうなっている？
Webサイト全体の親フォルダに、HTMLファイルやCSSファイルが設置してあり、画像フォルダの中には画像ファイルがそれぞれ格納されています。
さらに別ページを構成するフォルダ（category）には、そのページで使うファイルが格納されています。
webサイトに必要なファイル
webサイトをつくる時は最低限、以下の３種類のファイルが必要になります。
- Webページそのものとなるhtmlファイル
- Webページのデザインを整えるためのcssファイル
- ページ内の画像を表示するための画像ファイル
htmlファイルは1つのページにつき1つ必要
Webサイトをつくる時には１つのページにつき１つのhtmlファイルを作成する必要があります。
画像を見てみると「index.html」、「apple.html」、「lemon.html」とファイル名が異なる3つのhtmlファイルがあります。このファイル名はページに関係のある名前を英語で自由につけることができます。
このファイル名がWebページのURLにもなるので、基本的にはわかりやすい名前をつけましょう。
ファイル名の命名規則も決めておくと複数人での作業時にズレがでにくくなりますので初めに決めてからサイト制作に入りましょう。
×NG例） [人によって略称がまちまち]
spider.html、spd.html、spider_man.html
○OK例） [正式名称で英語で入れ、単語はハイフン(-)で繋ぐ]
spider-man.html
URLは「ドメイン」＋「ディレクトリ」＋「ファイル名」
WebサイトのURLはまずはじめに「ドメイン」から始まります。
ドメインとは、httpから始まり、最初のスラッシュまでの部分になります。
末尾には「.com」や「.jp」など特定の文字で終わるのが特徴です。
ドメイン例）
https://test.com
ドメインの後にディレクトリ名（フォルダ名）、ファイル名と続きます。
繋ぐときはそれぞれスラッシュ（/）で区切りを入れます。
URL例）
https://test.com/category/apple.html[
深い階層のディレクトリ（フォルダ）の場合、スラッシュの区切りがその分増えます。
深い階層のURL例）
https://test.com/category/fruit/apple.html
ときどきURLの末尾がスラッシュ（/）で終わっていて、ファイル名が無いURLがありますが、実は「index.html」ファイルを読み込んでいます。
「index.html」は一般的なサイトでは省略しても正しく表示されるようになっているからです。
ですので下記は同じURLになります。
・ https://test.com/
・ https://test.com/index.html
画像ファイルはなぜフォルダに入っている？
画像ファイルをフォルダに入れなかった場合、大量の画像ファイルとhtmlファイルが入り乱れることでフォルダ内がファイルでぐちゃぐちゃになってしまい、情報の整理がしにくい構造になってしまいます。
フォルダにいれることで画像ファイルは画像ファイルでまとめることができるので、管理が楽になり、制作効率も上がります。
ルール例）
imgフォルダを作り、その中に入れる画像のファイル名を「日付」＋「大きさ」にする。
・ 〜/img/20190320_s.jpg
・ 〜/img/20190331_l.jpg
画像ファイルに限らず、CSSやJavaScriptなどファイルの種類ごとにフォルダをまとめておくとさらに整頓しやすくなります。
あまり細かくフォルダ分けしすぎるとかえって煩雑になる場合もあります。
サイトの規模でやり方を柔軟に変えてもよいです
画像を入れるフォルダ名は決まりがあるわけではなく自由につけることができます。
よく使われるのは「img」「image」「images」などです
パスはWeb制作するうえで逃げられない必須の知識になります。ややこしいですがしっかりと理解しましょう！
