★ウェブサイトの保存場所を作る

ウェブサイトの保存場所を作る

ウェブサイトは、HTMLファイル、CSSファイル、画像ファイルなどの複数のファイルが集まったものです。
これから作成していくウェブサイトで使用するHTMLなどのファイル群をどんなフォルダ構成で保存していくのかについて、作成前に決めておくほうが良いでしょう。

ウェブサイトの保存場所を作る際に意識しておかなくてはならないのは、HTMLファイル、CSSファイル、画像ファイルなどのファイル群は、最終的にお互いにリンクを張り合うなどして関連してくるということです。
そのため、基本的にはどのようなフォルダ構成で保存しても構わないのですが、あまりに深い階層のフォルダや、バラバラのフォルダに分けて保存してしまうと管理が煩雑になってしまいます。

フォルダ名やファイル名については、原則として半角英数で、できるだけ短めに、できれば内容が想像しやすい名前にします。
ここで付けるフォルダ名やファイル名は、最終的にはウェブページのアドレスとなるURLの一部になることを意識してください。
例えば、logo.pngという画像ファイルがあるとして、これをimagesフォルダの中に保存するということは、最終的にこの画像ファイルのURLは、https://www.example.com/images/logo.png といった形式になります。

sampleフォルダの下にimagesフォルダを作成

このチュートリアルで作成していくサンプルサイトでは、sampleという名前のフォルダを作って、これから作成していくHTMLファイル、CSSファイルなどのすべてのファイルを、このsampleフォルダ以下に保存することにします。

画像ファイルについては、sampleフォルダの下にimagesフォルダを作成して、その中にまとめることにします。
これは、一般的にウェブサイトを制作する際に利用されることの多いフォルダ構成です。

それでは、ご自分のパソコンの中の任意の場所にsampleフォルダを作成してください。任意の場所と言われても良く分らないという方は、分かりやすいようにデスクトップ上にsampleフォルダを作成すると良いでしょう。
次に、sampleフォルダの下にimagesフォルダを作成してください。sampleフォルダの下にimagesフォルダを作成すると以下のような状態となります。

この時点ではsampleフォルダの中にはimagesフォルダだけが存在している状態です。まだ、HTMLファイルやCSSファイルや画像ファイルは存在していません。