webサイトのディレクトリ構造を紐解きます！

webサイトを制作するにあたり、避けて通れないのがディレクトリ構成です。どのようなファイルが必要なのか、あるいはどんな風なディレクトリ構成にすればいいのか？といった疑問を紐解いていきたいと思います。

ディレクトリ構造とは？

ディレクトリ構造とはwebサイト全体の元となるフォルダ・ファイルの構成のことです。

ディレクトリ構成は、他にもフォルダ構成と呼ばれることもあります。言葉の意味は同じですので、学習中にどちらの言葉が出てきても混乱しないでくださいね。（この記事ではディレクトリ構成で統一しています）

基本的なファイル・フォルダについて

もしかすると必要ないかもしれないくらいの基本的な内容ですが、念のために補足としてご説明しますね。

• ファイル：ファイル名.拡張子
• フォルダ：各ファイルが入っている箱のようなもの

フォルダ（箱）にいろいろなファイルを入れているようなイメージです。

更に言うと、ファイルには色々な種類があります。こちらも一例をご紹介しておきますね。

画像	○○.png、○○.jpg、○○.gifなど
HTML	○○.html
CSS	○○.css
Illustrator	○○.ai
Photoshop	○○.psd

勿論、世の中にはもっとたくさんの拡張子がありますので、ここでご紹介しているものはあくまで一例です

webサイトのディレクトリ構成

それでは、webサイトのディレクトリ構成がどうなっているのか解説していきたいと思います。

webサイトに必要なものとは？

まず、ディレクトリ構成を学ぶ前に、webサイトを製作する上で必要なものから説明しますね。

1. HTMLファイル：webページ本体
2. CSSファイル：webページのデザインを整えるもの
3. 画像ファイル：webページ内の画像（○○.jpg 、○○ .png 、○○ .gif など）

大体のwebサイトではこの３つが必要になります。

コーポレートサイトのディレクトリ構成

ここからは先ほどのコーポレートサイトを例に、よくあるパターンをご紹介したいと思います。

皆さんのパソコン設定によって、ファイルの並び順は違います。（今回は解説のため、分かりやすいような順番にしています。）実際に皆さんが作る時はこの並び順とは異なりますのでご注意ください。

フォルダ：css

先ほどの図をよく見てみると、cssフォルダにはstyle.cssしか入っていませんよね。

と思った方も多いのではないのでしょうか。

実は、CSSファイルだけcssフォルダに分けているのにはいくつか理由があります。

皆さんが個人的にwebサイトを製作する際にはCSSファイルは一つでいいかと思いますが、実務となるとそれだけではありません。大規模なwebサイトであればあるほどCSSのコード数は何千行という膨大なものになります。

それらを適切に管理できるよう、webページごとや役割ごとにCSSファイルを分割することがあります。そういった場合のため、CSSは１つのフォルダにまとめて管理されることが多いです。

フォルダ：images

画像ファイルをimagesというフォルダにまとめていますよね。

これは、画像ファイルを１つのフォルダにまとめることによって管理しやすくするためです。

ちなみに、今回の例ではimagesという名前のフォルダにしていますが、フォルダ名は基本的に自分の好きな名前にできます。……とは言っても誰が見ても分かるような名前にすることが望ましいです。

• img
• image
• images

が実際に現場でよく使われているフォルダ名です。

ディレクトリ構造まとめ

• ディレクトリ構造：webページを構成するフォルダやファイルのこと
• １ページ＝１つのhtmlファイルが必要
• ファイル名・フォルダ名は自由に命名してもいい。（ただし分かりやすい名前をつける
• CSSはフォルダ管理することもある
• 画像ファイルは１つのフォルダにまとめる