Webページは3つの層でできている

あなたが見ているWebページは、実は3種類の材料が重なってできています。骨組みを作る HTML、見た目を整える CSS、動きをつける JS(JavaScript)の3つです。この3つはそれぞれ役割がハッキリ分かれています。ここを最初に押さえておくと、AIが作ったコードを見たときに「これはどの層の話か」がスッと分かるようになります。

• HTML(骨組み) … どんな部品があるか。見出し・段落・画像・ボタンなど「中身の並び」を決める
• CSS(見た目) … その部品をどう見せるか。色・大きさ・余白・配置を決める
• JS(動き) … 押したら開く、スクロールで出てくる、といった「反応」を作る

大事なのは、この3つが別々のファイル(または別々の書き場所)に書かれることが多い、という点です。だから「文字の色を変えたい」ときはCSSを、「ボタンの文字を変えたい」ときはHTMLを、と探す場所が自然に絞れます。逆にここが混ざって見えていると、直したい1行がどこにあるのか分からず迷子になります。

<h1>ようこそ</h1>
<p>これは段落です。</p>
<button>送信</button>

h1 {
  color: navy;
  font-size: 32px;
}
button {
  background: orange;
}

この講座では、まずHTML(骨組み)とCSS(見た目)を読めるようになることを目指します。JS(動き)はもう一段先の話なので、今は「動きはJSが担当」とだけ覚えておけば十分です。