Web制作で使うファイルとフォルダー

制作物は1つのフォルダーへまとめる

Webサイトの制作を始めるときは、HTML、CSS、JavaScript、画像を1つの制作フォルダーへまとめます。

今回はmy-first-siteフォルダーを使います。フォルダー名とファイル名には日本語や空白を使わず、半角英小文字、数字、ハイフンで付けると安全です。

制作フォルダーを作って開く

最初に、Webサイトのファイルをまとめるmy-first-siteフォルダーを作り、Visual Studio Codeで開きます。

次の図では、「制作フォルダーを作って開く」の仕組みや関係を確認できます。

1. Windowsではエクスプローラー、macOSではFinderを開きます。
2. デスクトップや書類など、自分が分かりやすい場所を開きます。
3. 新しいフォルダーを作成し、名前をmy-first-siteにします。
4. Visual Studio Codeを起動します。
5. メニューから「ファイル」→「フォルダーを開く」を選びます。
6. 作成したmy-first-siteフォルダーを選びます。
7. Visual Studio Codeの左側にmy-first-siteが表示されたことを確認します。

ファイルを1つだけ開くのではなく制作フォルダー全体を開くと、HTML、CSS、JavaScript、画像の位置関係を確認しながら作業できます。

基本のフォルダー構成を作る

制作フォルダーの中を役割別に分けると、必要なファイルの場所を判断しやすくなります。

Visual Studio Codeの左側に表示されたmy-first-siteの中へ、次のファイルとフォルダーを作ってください。

my-first-site/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/

• index.htmlには、ページの文章や構造を書きます。
• css/style.cssには、色や余白などの見た目を書きます。
• js/main.jsには、クリックなどに反応する処理を書きます。
• imagesフォルダーには、写真やアイコンを保存します。

拡張子はファイルの種類を表す

.html、.css、.jsの部分を拡張子と呼びます。ブラウザやエディターは、拡張子を見てファイルの種類を判断します。

index.html.txtではHTMLファイルとして扱われません。ファイル名を付けたら、末尾の拡張子まで確認してください。

相対パスは現在地から考える

相対パスは、いま編集しているファイルの場所を出発点にして考えます。

相対パスは、今いるファイルから目的のファイルまでの道順です。index.htmlからCSSを読み込む場合は、cssフォルダーへ進むためcss/style.cssと書きます。

<link rel="stylesheet" href="css/style.css">

index.htmlからJavaScriptを読み込む道順はjs/main.jsです。

<script src="js/main.js"></script>

パスが合っているか確認する

• ファイル名の大文字と小文字が一致しているか確認します。
• style.cssとstyles.cssのような単数・複数の違いを確認します。
• 拡張子が二重になっていないか確認します。
• 現在のファイルから順番にフォルダーをたどります。

ファイルを作っただけではCSSやJavaScriptは動きません。HTMLから正しいパスで読み込んで、初めてブラウザへ反映されます。

次の図では、「パスが合っているか確認する」の仕組みや関係を確認できます。

ファイル名を付けるルール

ローカルでは表示できても、サーバーへ公開するとファイル名の大文字と小文字が区別される場合があります。Photo.jpgとphoto.jpgを別の名前として扱う環境があるため、この教材では半角英小文字へ統一します。

• 半角英小文字、数字、ハイフンを使う
• 日本語、空白、全角記号を使わない
• 内容が分かる名前にする（image1.jpgよりcompany-building.jpg）
• 同じ役割のファイルは命名方法をそろえる
• HTMLに書いた名前と実際のファイル名を一致させる

トップページのHTMLには、一般的にindex.htmlという名前を使います。WebサーバーはフォルダーのURLへアクセスされたとき、設定に従ってindex.htmlを探して返します。

HTMLを基準に画像の場所を考える

HTMLから画像を表示する場合も、現在開いているHTMLを出発点にして場所を考えます。index.htmlとimagesが同じ制作フォルダーにあるなら、画像の場所はimages/profile.jpgです。

パスはブラウザがファイルを探すための情報です。見た目が表示されないときはCSSだけを疑わず、指定した場所にファイルが存在するか、拡張子まで一致しているかを確認してください。

画像ファイルも用途ごとに整理する

画像が増えたら、ファイル名だけで内容を判断できるようにします。同じ画像を複製して名前だけ変えると、どれが最新版か分からなくなります。使用中の画像を1つに決め、HTMLからその画像を参照します。

• 写真はJPEGまたはWebPを基本にする
• 透過が必要な画像はPNGを検討する
• ロゴや単純な図形はSVGを検討する
• 表示に対して極端に大きな画像を置かない
• 装飾画像と内容を伝える画像を区別する

制作フォルダーを変更するときの注意点

ファイルやフォルダーを移動すると、それまで正しかったパスも変わります。移動後はHTML内のhrefとsrcを検索し、古い場所を参照していないか確認します。

ファイル構成を頻繁に変えると確認箇所が増えます。制作開始時に基本構成を決め、追加するファイルは役割に合うフォルダーへ保存してください。

このレッスンの確認方法

1. Visual Studio Codeでmy-first-site全体を開く
2. 必要なファイルとフォルダーが決めた場所にあるか確認する
3. HTML内のCSSとJavaScriptのパスを1文字ずつ確認する
4. ファイル名の大文字・小文字と拡張子を確認する
5. ChromeでHTMLを開き、Networkで読み込み失敗がないか確認する

この構成はSTEP 02のLP制作でも使います。ファイルが増えても、HTML、CSS、JavaScript、画像の役割を分けて管理できれば、修正する場所を見つけやすくなります。