ウェブ用の最初のファイルとフォルダ

ウェブサイトを置くフォルダを用意して、全部うまくいくか確認する。

ウェブサイトはフォルダの中に住む

世界のすべてのウェブサイトは、実はフォルダの中のファイルの集まり。自分のを用意しよう。

my-website というフォルダを作る。 デスクトップで右クリック → New Folder（Mac も New Folder、Windows は New → Folder）で my-website と名付ける。
VS Code でフォルダを開く。 VS Code を起動して、メニューから File → Open Folder… を選び、my-website フォルダを見つける。VS Code が「このフォルダの作者を信頼しますか？」と聞いたら Yes, I trust the authors をクリック——作者は自分だから！
index.html というファイルを作る。 左パネルでフォルダ名の上にマウスを置き、New File アイコン（プラス付きのページ）をクリック。正確に index.html と入力して Enter。

💡

なぜ index.html？ ウェブサイトのメインページの決まった名前。ブラウザがフォルダに来ると、まず index.html を探す——学校に入って自分の教室に直行するみたい。

最初のコードを書こう

index.html ファイルにこれを入力（右上のボタンでコピーしてもOK）：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My website</title>
  </head>
  <body>
    <h1>It works!</h1>
    <p>This is my very first file. From here I'll build a whole website.</p>
  </body>
</html>

ファイルを保存：Ctrl+S（Mac なら Cmd+S）。こまめに保存——未保存のファイルは VS Code で名前の横に小さな点が付く。

ブラウザでページを開く

フォルダ内の index.html（デスクトップ → my-website）を ダブルクリックで開く。ブラウザが開いて “It works!” と表示される。

✅

確認： ブラウザに大きな “It works!” 見出しが見える。そうなら——動くウェブ作業場ができた。レベル 1 に直行できる！

💡

便利なコツ： VS Code とブラウザを並べて開いたまま。コードを変えたら保存（Ctrl+S）して、ブラウザで F5 を押して更新。変更がすぐ反映される。

この章のまとめ

ウェブサイトはファイルでいっぱいのフォルダ。あなたのは my-website。
メインページは常に index.html。
作業ループ：コードを書く → 保存（Ctrl+S）→ ブラウザを更新（F5）。これを何度も繰り返す。