HTML・CSS・JavaScriptの役割の違いを、動かして理解する

Web制作の入門でまず出てくるのが、この3つの役割分担です。たとえ話で説明されることが多いのですが、実際に自分で書き換えてみるのがいちばん早く腑に落ちます。この記事では、同じ内容に3つを1枚ずつ重ねていきます。

1. HTMLだけの状態

まずHTMLだけ。文字が並んでいるだけで、飾りは何もありません。それでも「見出し」「段落」「ボタン」という区別はすでに付いています。

CODEHTMLだけコードを書き換えると、すぐ下で動きます

style.css タブは空っぽです。それでも見出しが大きいのは、ブラウザが最初から持っている見せ方が効いているためです。

同じHTMLに、見た目の指定を足します。中身の文章は1文字も変えていないのに、印象がまるで変わります。CSSは「どう見せるか」だけを担当していて、何が書いてあるかには関与しません。

CODECSSを足すと見た目が変わるコードを書き換えると、すぐ下で動きます

style.css の色や数字を書き換えてみてください。index.html は触らなくても見た目だけが変わります。

最後にJavaScriptです。ボタンを押したときの反応など、「操作に対して何かが起きる」部分を担当します。ここまで来ると、ページが読みものからアプリらしいものに変わります。

CODEJavaScriptを足すと動くコードを書き換えると、すぐ下で動きます

実際にプレビューのボタンを押してみてください。script.js の文字を書き換えると、表示される内容も変わります。

3つを分けている理由は、単なる住み分けではありません。トラブルが起きたときに「どのファイルを見ればいいか」が決まるからです。

この切り分けができるだけで、原因にたどり着く時間は大きく変わります。まずはHTMLから。骨組みの書き方を1行ずつ確かめていきましょう。