ファイルを整理してみよう | HTML / CSS入門

前のページでは、

index.html
profile.html
image.jpg

などを作成しました。

このままでも動きますが、ファイルが増えてくると管理しづらくなります。

実際のWeb制作では、

HTML
CSS
画像

などをフォルダごとに整理して管理します。

今回は、その基本的な整理方法を学んでいきます。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
├── profile.html
├── css/
└── images/
    └── image.jpg

作業用フォルダを作ろう

まずは、作業用の場所を決めておくのがおすすめです。

BuildBooks では、Windows11 の場合は以下のような場所をおすすめしています。

ホームフォルダ
sandbox

または、

ホームフォルダ
projects

です。

例えば、

C:\Users\ユーザー名\sandbox

のような場所になります。

sandbox と projects の違い

おすすめとしては、

sandbox → 練習用・試作用
projects → 本格的な制作物

という使い分けです。

最初のうちは、まず sandbox を作っておくのがおすすめです。

Windows11でフォルダを作成する

今回は、コマンドは使いません。

Windows11 の画面操作だけで進めていきます。

フォルダを作る手順

まず、エクスプローラーを開きます。

その後、

C:\Users\ユーザー名

を開いてください。

次に、

右クリック
「新規作成」
「フォルダー」

を選択します。

フォルダ名を、

sandbox

にしてください。

html-practice フォルダを移動する

現在作成している、

html-practice

フォルダを、

sandbox

の中へ移動しましょう。

最終的には、以下のような構成になります。

sandbox/
└── html-practice/

さらに整理してみよう

次は、html-practice の中にフォルダを追加します。

以下のような構成にしてみましょう。

html-practice/
├── index.html
├── profile.html
├── css/
└── images/

images フォルダを作る

まず、

images

フォルダを作成してください。

その中へ、

image.jpg

を移動します。

最終的には、

images/image.jpg

になります。

HTMLを書き換える必要がある

画像を移動したため、HTML側も変更が必要です。

現在は、

src="image.jpg"

になっています。

これを、

src="images/image.jpg"

へ変更してください。

images/image.jpg の意味

src="images/image.jpg"

は、

images フォルダの中にある image.jpg

という意味です。

フォルダ整理は非常に重要

実際のWeb制作では、

HTML
CSS
JavaScript
画像

など大量のファイルを扱います。

整理されていないと、

どこに何があるかわからない
同じ名前のファイルが増える
修正が難しくなる

など、管理が大変になります。

css フォルダは次回使う

現在はまだ CSS を HTML の中へ直接書いています。

しかし実際のWeb制作では、CSSを別ファイルに分けることがほとんどです。

そのため、先に css フォルダも作成しておきました。

少しずつ実際の構成に近づいている

最初は、

index.html だけ

でした。

しかし現在は、

複数ページ
画像
フォルダ整理

など、少しずつ実際のWeb制作に近づいています。

最初から完璧に理解する必要はありません。

まずは、

ファイルが増えると整理が必要になる

という感覚をつかむことが大切です。

次のページでは

次のページでは、

CSSを別ファイルへ分ける
link タグ
css/style.css

などを学んでいきます。

実際のWeb制作でよく使われる構成になっていきます。