HTML と CSS が書けるようになってくると、実はコードより先にぶつかりやすいのが “フォルダとファイルの置き方”の問題です。
「 CSS が反映されない…」
「画像が表示されない…」
「どこに何を置けばいいかわからない…」
こうしたトラブルの多くは、フォルダ整理が原因で起きています。
この記事では、 HTML ・ CSS の作業でよく起きる”ファイルやフォルダの迷子”を防ぐために、知っておくと安心な”フォルダ整理の基本”をわかりやすく紹介します。
ここを押さえるだけで、 Web 制作が一気にスムーズになりますよ。
ではまず、作業フォルダをどう作るか見ていきましょう。
Web制作に必須！フォルダの正しい作り方
HTML ・ CSS の作業は、最初のフォルダ作りから始まります。
ここがしっかりできているだけで、
- CSS が反映されない
- 画像が表示されない
- ファイルの場所がわからなくなる
といったトラブルの多くを防ぐことができます。
まずは、最初に作るべきフォルダを用意しましょう。
まずは”作業フォルダ”を1つ作るだけでOK
難しいことは一切ありません。
最初にやることは、作業用のフォルダを1つ作るだけ。
- デスクトップの何もないところで右クリック
- 新規作成 → フォルダー を選ぶ
- フォルダ名をつける（例： my-website ）
これで準備完了です！
フォルダ名は半角英数字にしよう
日本語でも作れますが、 Web 制作では半角英数字が基本。
理由は、
- 文字化けの原因になることがある
- URL に日本語が入ると見た目が変わる
- エラーが起きても気づきにくい
といったトラブルを避けられるからです。
最初から”全部半角でつける”と決めておくとラクです。
HTMLとCSS を同じフォルダに置くメリット
初心者のうちは、作った HTML と CSS を同じフォルダに置くのが一番おすすめです。
理由はシンプル
- つなげるとき（ link ）が簡単
- 階層を気にしなくていい
- パス迷子にならない
つまり、トラブルが圧倒的に減ります。
実際の中身はこんな感じ
- my-website
- index.html
- style.css
これだけで十分です。
フォルダができたら VS Code で開いておく
最後に、作ったフォルダを VS Code で開きましょう。
- VS Code を起動
- 左上の ファイル → フォルダーを開く
- 作ったフォルダを選ぶ
こうしておくと、作るファイルが全部このフォルダにまとまるので作業がスムーズになります。
ここまでのまとめ
- まずは作業用のフォルダを1つ作ればOK
- フォルダ名は半角英数字がおすすめ
- HTML と CSS は同じフォルダに入れておくと迷子を防げる
- 作ったフォルダを VS Code で開いておくと作業しやすい
ファイル名は半角英数字でつけよう
フォルダを作れたら、次はファイル名のルールを覚えておきましょう。
実はこれ、初心者が一番軽く見がちですが、 Web 制作ではとても重要なポイントです。
ファイル名は”半角英数字”が基本
理由はシンプルです。
- 日本語のファイル名は文字化けしやすい
- URL にしたとき変な文字列になる
- CSS や画像へのパスが失敗しやすい
- 他の環境（サーバーなど）で動かなくなることがある
“ファイル名は半角英数字”というだけで、このあたりのトラブルをまとめて回避できます。
名前は短く・わかりやすく・半角での3つを意識すればOKです。
“スペース”や”大文字”も避ける
特に初心者がやりがちなのがこれ
- sample page.html （スペースが入っている）
- MySite.css （大文字が混ざる）
これも避けたほうが安全です。
スペースが入るとURLが sample%20page.html のようになり、急に読みづらくなってしまいます。
- sample-page.html
- sample_page.html
ハイフン（ – ）やアンダーバー（ _ ）で区切ると読みやすくなります。
“統一ルール”があると後でめちゃくちゃ楽になる
Web 制作では、ファイル名のスタイルをそろえておくと迷わなくなります。
たとえば、次のようなルールを決めておくと安心です
- すべて小文字
- スペースは使わない
- 単語はハイフンで区切る（ sample-page ）
- 拡張子を必ずつける・表示する（ .html / .css / .png ）
プロの現場でもほぼこの作法です。
ここまでのまとめ
- ファイル名は必ず半角英数字にする
- 日本語やスペース、大文字は避ける
- 短くてわかりやすい名前にする
- ハイフン（ – ）で単語を区切ると読みやすい
index.htmlとは何？
HTML を学び始めると必ず出てくる名前、それが index.html （インデックス）です。
このファイル名には、ちょっと特別な意味があります。
index.html は”サイトの入口ページ”
Web の世界では、フォルダの中にある”最初に開かれるページ”が index.html と決まっています。
つまり、
- フォルダを開いたときに自動で表示されるページ
- サイトの一番最初に見るトップページ
これが” index.html “です。
パソコンで例えると”自動で開かれる表紙”のようなもの
普通のファイルはダブルクリックしないと開きませんが、 Web ではフォルダを開くだけで index.html が表示されます。
たとえば、次のようなフォルダがあったら
- my-website/
- index.html
- about.html
ブラウザで my-website を開くと、自動で index.html が表示されるという仕組みです。
HTML と CSS のつなぎも”index.html”から始まる
CSS を読み込む <link> も基本的にこの index.html に書きます。
<link rel="stylesheet" href="style.css">これにより、トップページ全体にデザインが適用されます。
index.htmlを作るのは最初の1回だけでOK
サイトを作るとき、
index.html（トップページ）about.html（自己紹介ページ）contact.html（お問い合わせ）
というように、複数ページを作ることが増えます。
でも、 index.html は必ず1フォルダにつき1つだけ。
最初の入口になるページだからです。
インデックスではない名前にしないこと
- main.html
- top.html
- home.html
これでも動きますが、自動で開かれません。
- index.html
これが最初に読み込まれるページ。
ここまでのまとめ
- index.html は”サイトの入り口”
- 自動で表示される特別なページ
- CSS の読み込みも index.html に書くことが多い
- 1フォルダにつき index.html は基本1つだけ
CSSファイルの置き場所を決めよう
HTML と CSS はファイルが別々なので、どこに置くか がとても大切です。
CSS の置き場所が変わるだけで、
- CSS が反映されない
- パスの書き方が複雑になる
- 画像の読み込みも難しくなる
といった”迷子問題”が一気に増えてしまいます。
まずは初心者にとって一番シンプルな置き場所を確認しましょう。
最初は”HTMLと同じフォルダ”に置くのが最強
初心者のうちは、 style.css を index.html と同じ場所に置くのが確実で簡単です。
フォルダ構成はこう
- my-website/
- index.html
- style.css
この形にしておけば、 CSS の読み込みタグはいつも同じ1行でOKです。
<link rel="stylesheet" href="style.css">- 階層を気にしなくていい
- パス迷子が起きない
- つまずくポイントが激減
というメリットがあるので、初心者はこの構成が一番ラクです。
慣れてきたら”cssフォルダ”を作る方法もある
Web 制作の現場では CSS をまとめて” css “というフォルダに入れることも多いです。
こんな構成になります
- my-website/
- index.html
- css/
- style.css
この場合、読み込みはこう
<link rel="stylesheet" href="css/style.css">この” css/style.css “が”パス（道）”で、ここを覚えると一気にステップアップできます。
ただし！
初心者にはまだ難しいので、最初は同じフォルダで OK
フォルダを増やすと階層が増えて、ミスが多くなるのが初心者あるあるです。
後で階層を学んだら、 css フォルダに移行すれば大丈夫。
CSSの置き場所が変わると”href”の中身も変わる
CSS の場所を変えるとき、 HTML 側の <link> もセットで変更しないと反映されません。
例： css フォルダに入れる場合
<link rel="stylesheet" href="css/style.css">よくあるミス
- style.css だけ移動して
<link>を直し忘れる - フォルダ名を間違える
- スペルミス
場所を変えたら link も変える！
これだけ覚えておけば安心です。
ここまでのまとめ
- CSS は HTML と同じフォルダに置くのが初心者にとって最強
- 迷子にならないので、パスの心配も減る
- 慣れたら css フォルダを作る方法もある
- CSS を移動したら
<link>の href も必ず変更する
画像を置くフォルダはどう作る？
HTML を使い始めると、多くの人が最初につまずくのが画像が表示されない問題です。
そして、その原因のほとんどが画像の置き場所（フォルダ）にあります。
そこでまずは、画像専用フォルダを作って”画像の迷子”を防ぐところから始めましょう。
画像は”images”フォルダにまとめるのが定番
Web 制作では、画像は images （イメージズ）というフォルダにまとめておくのが一般的です。
理由はシンプル
- 画像がどこにあるかすぐわかる
- HTML がスッキリする
- ファイルが散らばらず、迷子にならない
初心者でも、”画像は images に入れる”と決めておけば迷いません。
- 作業フォルダを右クリック
- 新規作成 → フォルダーをクリック
- フォルダ名を images にする（半角英字）
すると、こんな構成になります
- my-website/
- index.html
- style.css
- images/
この” images フォルダ”の中に、 JPG ・ PNG ・ SVG などの画像を入れていきます。
画像を読み込むときの書き方はこうなる
画像フォルダを作ったら、 HTML で画像を表示するときの書き方が少し変わります。
画像フォルダなしの場合
<img src="cat.png" alt="猫の画像">画像フォルダありの場合（ images に入れた場合）
<img src="images/cat.png" alt="猫の画像">ポイントはフォルダ名（ images ）を最初に書くこと。
これを忘れると、「画像が表示されない…」の定番エラーになります。
imagesフォルダ名は変えないほうが良い
フォルダ名は自由に決められますが、初心者のうちは images を使うのが安全です。
- img
- picture
- assets
- photo
などにしてしまうと、読み込みパスが混乱しやすくなります。
Web 制作の世界では images がほぼ標準なので、まずはこの名前にしておきましょう。
よくあるミスと注意点
初心者がやりがちな画像トラブルをまとめておきます
- 画像
- 写真
- ピクチャ
文字化けの原因になる場合があります。
src="cat.png" のままだと読み込めない
正しくは src="images/cat.png"
画像が表示されないときは”パス（道）が合っているか？”をまず疑うのがコツです。
ここまでのまとめ
- 画像は images フォルダにまとめるのが定番
<img src="images/ファイル名">の形で読み込む- フォルダ名・ファイル名は半角英数字で
- 表示されない時はパスの確認が一番大事
階層（かいそう）って何？初心者が必ずつまずくポイント
HTML を書いていると必ず出てくる言葉が“階層（かいそう）”。
「階層って何？」
「なんで必要なの？」
「なんで画像が表示されないの？」
多くの初心者がここで一度つまずきます。
でも大丈夫。
階層は一言で言うと、“フォルダの中と外の位置関係”のこと
これさえ理解すれば、 CSS や画像が反映されない原因の半分は解決します。
階層は”フォルダの住所”のようなもの
あなたのパソコンの中には、フォルダの中にフォルダがあって、その中にファイルがあります。
これを”階層”と呼んでいます。
例
- my-website/
- index.html
- style.css
- images/
- cat.png
この場合、
- index.html と style.css は同じ階層
- images は index.html より1つ下の階層
- cat.png は2つ下の階層
という感じです。
HTMLからCSS・画像を見るときは”道”を書く必要がある
階層がわかると、なぜ”パス（道）”を書く必要があるかが理解できます。
HTML がファイルを探すときは、「どこにあるの？」という”住所”を見に行きます。
例：画像の場合
<img src="images/cat.png" alt="猫の画像">これは
- images フォルダの中の
- cat.png という画像を見に行ってね
という意味です。
同じ階層にある場合は、名前を書く”だけ”でOK
たとえば、 index.html と style.css が同じ階層なら、
- my-website/
- index.html
- style.css
CSSの読み込みはこの1行だけ
<link rel="stylesheet" href="style.css">シンプルですね。
1つ下の階層にある場合は”フォルダ名/ファイル名”
次のようにcssフォルダを作っている場合
- my-website/
- index.html
- css/
- style.css
CSSの読み込みはこうなります
<link rel="stylesheet" href="css/style.css">- cssフォルダの中に
- style.cssがある
という意味です。
一気に難易度が上がるのは”上の階層に戻る”時
これは初心者がつまずくトップ3に入ります。
たとえばこの構造
- my-website/
- index.html
- style.css
- pages/
- about.html
about.html から上の階層（ my-website ）に戻りたいときは、”../“を使います。
<link rel="stylesheet" href="../style.css">ひとつ上の階層に戻って、 style.css を探す。
「今どこにいるのか？」を意識するだけで一気に理解できる
階層で迷うときは、”いま編集しているファイルの位置”を確認しましょう。
確認ポイント
ここがズレると
「表示されない」
「反映されない」
が起きます。
パス（道）が間違っているとどうなる？
例：本当は images/cat.png の場所なのに、
<img src="image/cat.png">と書いてしまうと…
- image （フォルダ名が間違っている）
- images と書くべきなのに s を忘れる
- 絶対に見つからないので表示されない
このように、場所が1文字違うだけでエラーになるのが階層の世界です。
ここまでのまとめ
- 階層 ＝ フォルダの位置関係（住所のようなもの）
- 同じ階層ならファイル名だけでOK
- 下の階層なら”フォルダ名/ファイル名”
- 上の階層に戻るときは” ../ “
- ファイルが反映されないときは”パス（道）”の間違いがほとんど
今日できたこと＆次のステップ
フォルダとファイルの整理は、 HTML や CSS の書き方よりも先に知っておくと、作業が一気にスムーズになる大事な基礎です。
今日ここまで進めたあなたは、 Web 制作でつまずきやすいポイントをしっかり押さえられています！
では、できるようになったことをまとめてみましょう。
- 作業フォルダを正しく作れるようになった
- HTML と CSS を同じフォルダに置く理由を理解した
- ファイル名を”半角英数字”でつける重要性を知った
- index.html がトップページ（入口）になる意味を理解した
- images フォルダを作って画像を整理できるようになった
- “階層（フォルダの位置関係）”の基本がわかった
- 画像や CSS のパス（道）の書き方を意識できるようになった
確認問題
ファイル名として避けたほうがいいのはどれ？
- index.html
- style.css
- 私のサイト.html
答え：3.私のサイト.html
imagesフォルダの中の cat.png を表示したい。正しい書き方は？
<img src="cat.png"><img src="images/cat.png"><img src="image/cat.png">
答え：2.<img src="images/cat.png">
1つ下の階層にある style.css を読み込むには？
- my-website/
- index.html
- css/
- style.css
次のうち正しいのは？
<link rel="stylesheet" href="style.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="../style.css">
答え：2.<link rel="stylesheet" href="css/style.css">
次は”HTML・CSSの書き方ルール”に進もう
次は HTML ・ CSS の書き方ルールに進みます。
ここでは、
- タグの書き方
- セレクタと中かっこ（{}）の基本
- インデント（字下げ）
- コメントアウト
- よくあるミスの例
など、”キレイで読みやすいコードを書くための基礎”を学んでいきます。
ここを理解すると、書いたコードを自分で読み返すのがラクになり、エラーにも気づきやすくなるので一気にレベルアップしますよ。