LINEで現役エンジニアに直接質問してみよう!登録無料

Webサイトのディレクトリ(フォルダ)構造とURLの関係はどうなっているの?

Webサイトを作る上で欠かせないのが、ディレクトリ(フォルダ)構造です。

Webサイトを作成する初めの頃は、URLと実際のフォルダ構造との関係についてイメージができない部分があるのでは無いでしょうか?

  • Webサイトのディレクトリ構造はどうなっているの?
  • ディレクトリ内のファイル配置設計はどうすればいいの?
  • みんなWebサイトのファイル整理はどうしているの?

このような疑問に答える初心者向けの内容となっています!

MEMO

「ディレクトリ」という名前は聞き慣れないかもしれません。Windowsで言う所の「フォルダ」と全く同じものです。

MacやLinuxではディレクトリという言葉が使われ、エンジニアでも「ディレクトリ」の方がメジャーなので、このサイトではこちらに統一して話を進めていきます。

Webサイトのディレクトリ構造はどうなっているの?

Webサイトのディレクトリ構造について解説します。サンプルWebサイトを公開しているので、それを元にディレクトリ構造がどのようになっているのか理解しましょう!

サンプルWebサイトのダウンロード

Webサイトのディレクトリ構造を解説する前に、実際に公開しているWebサイトとその実際のファイルたちを比較したながらの方が理解しやすいので、まずは下記サイトとファイルをダウンロードしてください。

STEP.1
サンプルWebサイトを開く

サンプルサイト「https: //selene-43d926.netlify.com/ 」を別タブで開きましょう。

STEP.2
サンプルサイトのディレクトリをダウンロードする

サンプルサイトのサイトディレクトリを「ここ 」からダウンロードします。

zipファイルでダウンロードされるので、解凍しておきましょう!

下記解説に続く

ダウンロードしたファイルの中身を覗いてみると、このような構造になっています。

.htmlstyle.cssなど、怪しいファイルが色々入っていますね!これらはWebページを表示するためにすべて必要なファイルです。

今は意味がわからなくても、今後の解説でわかるようになるので、安心してください!今は、「こんなファイルが必要なんだな」と理解できればOKです!
順番に中身に入っているファイルについて詳細を解説していきますね!

Webサイトのディレクトリに入っているファイルの種類を解説

ディレクトリ内には様々なファイルが入っています。これらのファイル1つ1つがどのようなファイルなのか理解できるまで解説していきます!

まず、この中で重要となるファイルが4種類あります。

  1. 「〇〇.html」… Webページを読み込む一番基本となるファイル
  2. 「〇〇.css」… HTMLファイルに紐付いてページのデザインを担当するファイル
  3. 「〇〇.js」… Webブラウザで動作するプログラム(javascript)
  4. 「画像ファイル」… 画像ファイル(.jpg/.png/.gif/.webp)など

「〇〇.html」

Webページで一番重要になるファイルです。なぜなら、ブラウザがこのファイルを読み込んだあとに、必要となる画像などの関連ファイルのダウンロードを開始するからです。つまり、HTMLファイルがなければ、Webページは表示できなくなります。

MEMO

ファビコンとは?

ブラウザのタブにアイコンがWebサイトのアイコンが設置されていますよね?アレの名前を「ファビコン」と言います。

ファビコンはWebサイト管理者が好きに設定できます。

このように、<link rel="icon" href="ファビコンまでのパス">で設定します。このサンプルWebサイトでは「img/core-img/favicon.ico」にあることがわかります。

「〇〇.css」

「〇〇.css」のように.cssの付いているファイルが「カスケードスタイルシート(Cascading Style Sheets)」と呼ばれるファイルで、HTMLファイルをダウンロード&解析した後に使われます

ダウンロードされたCSSファイルは、Webサイトの文字や画像の配置やバックグラウンドの色指定など、デザインに関する全てを担当します。

どのCSSファイルがWebサイトにダウンロードされ、適用されるかは「<head>」というタグの中にかかれている「<link>」でCSSファイルの場所で設定されています。

例えば、このHTMLファイルでは、CSSファイルが2つ使われています。

  • 「style.css」… 1つ目のCSSファイル
  • 「css/responsive.css」… 2つ目のCSSファイル

です。

実際にディレクトリを開いてみると、このようにファイルがあり、これが読み込まれています。

「〇〇.js」

「〇〇.js」のように、.jsの付いているファイルが「スクリプトファイル」と呼ばれるファイルで、Webサイトの動きやユーザーのクリックなどに反応して、HTMLの構造やCSSの設定を変更するプログラムが書かれています。

このファイルもCSS同様にHTMLファイルをダウンロード&解析した後に使われます

どのjsファイルがダウンロードされるかは、HTMLの最後にjsを読み込むタグの内容によって異なります。具体的には、<script>srcにかかれてあるパスのファイルが使われます。

例えば、このHTMLファイルでは下記の5つのファイルが読み込まれています。

  • js/jquery-2.2.4.min.js」… HTMLの構造を操作するプログラム
  • js/popper.min.js」… ポップアップメッセージを表示するプログラム
  • js/bootstrap.min.js」… ヘッダーナビゲーションなど色々な機能を提供
  • js/plugins.js」… jqueryの機能拡張のプログラム
  • js/active.js」… Web開発者独自のプログラム(jquery、popper、bootstrapなどを利用)

実際にディレクトリを覗いてみると、このようにファイルがあり、これが読み込まれています。

関連ファイルに使われている「パス」とは?

ところで、先程から出てくる「パス」とはどのような意味でしょうか?解説をしていなかったので、ここでURLと比較しながら解説してきます。

あなたの予想しているとおり、WebサイトのディレクトリとURLには密接な関係があります。

URLとは?

まず、URLとはなんなのか復習していきましょう。

URLは、「プロトコル」「サブドメイン」「ドメイン」「パス」「ファイル名」の5つのパーツが組み合わさって作られています。

この中で、「プロトコル」「サブドメイン」「ドメイン」はサーバー側の設定や、ドメイン取得時に決まってしまうものです

URLとパスの関係

残った、「パス名」「ファイル名」の部分が、ディレクトリ構造に対応しています。

例えば、下記のindex.htmlをURLを使って使って指定したいとします。

その場合のURLは下記のようになります。またプロトコルやドメインは「https: //example.com」とします。

https: //example.com/index.html

このように、ディレクトリ構造とURLのパス部分は完全に対応します。

絶対パスと相対パス

ここで、関連知識として「絶対パスと相対パス」を紹介します。これらは、今後のWeb制作で必ず必要な知識です。

ここで、絶対パスと相対パスの特徴を一覧にします。

  • 絶対パス
    • URLはすべて絶対パスになる
    • 絶対パスは/から始まる
  • 相対パス
    • 相対パスは「とあるファイルから相対的にパスを指定する書き方」である
    • 異なるドメイン間で使えない
    • ./または../の文字から始まる
    • ./は省略できる

ザッと、このような特徴があります。

さらに詳しい内容は別記事を用意するので、それを見てください!

Webページ上のリンクとディレクトリ構造の関係

Webページ上のリンクをクリックすると、色々なページに飛んでいきます。この飛ぶ先のHTMLファイルやそれらのリンクはどのようになっているのかを見ていきましょう!

まずは、このサイトを別タブで開きましょう。

この時のヘッダー部のリンクを実現するために、どのようなディレクトリ構造になっているのでしょうか?

この部分のソースコード(index.html)を見てみると、このように<a>というリンクを作るHTMLタグによって、各ファイルにリンクさてれいます。

また、この書き方は「相対パス」に分類されます。なぜなら、hrefのパスの先頭が/からはじまっていないからです。この場合、同じディレクトリにあるファイルという意味になります。

例えば、このソースコードのファイルがhttps: //selene-43d926.netlify.com/index.htmlでアクセスできるので、「about.html」というのはそこと同じディレクトリにあるhttps://selene-43d926.netlify.com/about.htmlだと言うことになります。

MEMO

URLで「index.html」は省略出来る場合がある

Webサイトによっては、「https: //selene-43d926.netlify.com/」のように「/」でおわり、その後のファイル名を省略しているものもあります。

本来は「https: //selene-43d926.netlify.com/index.html」の方が正しいのですが、この部分は省略されているとみなして表示してくれる仕組みになっています。

では、なぜ「index.html」という名前が使われているのでしょうか?

実は、実のところ、「index.html」という名前はWebの規約などで決まっているわけでは無く、Webサーバー側で自由に設定できます。

例えば、MicrosoftのWebサーバーであるIIS(Internet Information Service)では、index.htmlではなく「Default.html」が標準で使われていました。なので、index.htmlをあえて設定しないと使えなかったのです。

Webサイトのディレクトリのルール

Webディレクトリの構造がわかった所で、Webサイトを実際に作る時のディレクトリやファイルのルールについて紹介します。
どれも今のWebサイト制作でどこでも当たり前に行われていることなので、迷ったらこれに従いましょう!

  • すべてのディレクトリ名やファイル名は英数字
  • 画像は1つのフォルダに入れる
  • CSSは複数ある場合、1つのフォルダに入れる

また、これは必ずやらないといけないわけではなく、やったほうがスムーズにWeb制作出来るといったものです。

すべてのディレクトリ名やファイル名は英数字

すべてのディレクトリやファイル名は英数字にしましょう!なぜかと言うと、日本語はURLに含めることができず、エンコードされてしまうからです。

例えば、日本語で「」「ハロー.html」というファイルを作ったとします。これをURLで使うと「http: //example.com/%E3%83%8F%E3%83%AD%E3%83%BC.html」のようになってしまいます。この場合「%E3%83%8F%E3%83%AD%E3%83%BC」が「ハロー」という文字です。

このように、ディレクトリ名/ファイル名とパス名がせず、Webサーバーに予期せぬエラーを発生される原因になるため、行わないようにしましょう!

画像は1つのフォルダに入れる

画像はすべて1つのディレクトリにまとめることが多いです。images imgs img などのディレクトリを作り、その中にまとめて入れてしまいます。
こうすることで、Webページ編集の際にファイルの場所を探す手間を少し省けます。

CSSは複数ある場合、1つのフォルダに入れる

CSSファイルが複数ある場合は、cssというディレクトリを作成し、その中にすべて入れて使うようにしましょう。ページごとに異なるCSSを使う場合は「contact.css」など、HTMLファイル名と同じような名前で作ると後で見た時にわかりやすいです。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。