HTML / CSS / JS の役割

この章でわかること: Webページを形づくる3つの言語の「担当範囲」。自分で書ける 必要はまったくありません。役割の地図だけ持ちましょう。

人間の体に例えると

言語	担当	体で言うと	デザインで言うと
HTML	構造・意味(見出し、段落、ボタン)	骨格	ワイヤーフレーム
CSS	見た目(色、余白、フォント、配置)	服・見た目	ビジュアルデザイン
JavaScript (JS)	動き(クリックで開く、データを取る)	筋肉・神経	プロトタイプのインタラクション

骨格(HTML)があって、そこに服(CSS)を着せ、筋肉(JS)で動かす。この順で 重なっていると考えると、3つの関係がすっきりします。

デザインツールとの対応

Figmaなどで作る「レイヤー構造」がHTMLに、「スタイル指定」がCSSに、 「プロトタイプのつなぎ込み」がJSに近い、とイメージすると馴染みやすいはずです。

ノート

実際の制作では、Next.js が HTML・CSS・JS をまとめて扱ってくれるので、 3つを別々に意識する場面は多くありません。ここでは「言葉が出てきたときに 慌てない」程度の理解で十分です。

なぜ大事か

AIに修正を頼むとき、この区別ができると指示が驚くほど正確になります。

• 「色と余白を直して」→ CSS の話
• 「ボタンを押したら一覧が開くようにして」→ JS の話
• 「ここに見出しと説明文を足して」→ HTML の話

AIにこう頼むと良い

「見た目だけ調整したいので、構造(HTML)や動き(JS)は変えないで、CSSだけ直して」 のように、触ってほしい層を名指しすると、余計な変更を防げます。

参考リンク(情報ソース)

• MDN HTML: https://developer.mozilla.org/ja/docs/Web/HTML
• MDN CSS: https://developer.mozilla.org/ja/docs/Web/CSS
• MDN JavaScript: https://developer.mozilla.org/ja/docs/Web/JavaScript