HTML / CSS / JavaScript の役割

この記事のゴール

• HTML/CSS/JSを「骨・見た目・動き」で説明できる
• 「どこを直せばいいか」の当たりが付く（超重要）

1. まず結論（30秒）

• HTML: 内容と構造（骨組み）
• CSS: 見た目（デザイン）
• JavaScript: 動き（操作・処理）

2. 直感で理解（たとえ）

HTML = 家の柱・間取り
CSS  = 壁紙・家具・色
JS   = 電気・自動ドア・インターホン

3. 具体例（切り分け）

• 文字を変える → HTML（またはWordPressの本文/テンプレ）
• 色や余白を変える → CSS
• ボタン押したら開閉したい → JavaScript
• フォームが送れない → JS（バリデーション） or サーバ側（バックエンド）も疑う

4. 最低限の用語

• DOM: ブラウザがHTMLをツリー構造にしたもの（JSが触る対象）
• class: CSSやJSで狙うための目印

5. よくある誤解

• 誤解: CSSで文章を追加できる
  正しくは: 内容はHTML。CSSは装飾が役割
• 誤解: JSは後回しでいい
  正しくは: 最低限のDOM操作/フォームは早めに触ると理解が一気に進む

6. ミニ課題（30分）

1つのページで「骨・見た目・動き」を全部体験します。

• HTMLで「見出し・本文・ボタン」を作る
• CSSで「色・余白・中央寄せ」を当てる
• JSで「ボタン押したら文字が変わる」を作る

ブログに載せるもの（アウトプット）

• HTML/CSS/JSそれぞれ何を担当したか（各1行）
• 動いた様子のスクショ（可能ならGIF）

7. 理解チェック

1. HTML/CSS/JSはそれぞれ何担当？
2. 「スマホで崩れる」はまずどこを見る？
3. DOMとは何？

まとめ

• 今日の結論: Webは「骨組み（HTML）+見た目（CSS）+動き（JS）」