Webページを作るときは、HTML・CSS・JavaScript という3つを使います。 でも、「名前は聞いたことあるけど、どう違うの？」と思う人も多いはず。
そこで今回は、この3つを家づくりに例えて、 小学生でもわかるレベルで説明します。
HTMLは“家の骨組み”
HTMLは、Webページの形・中身を作る役割があります。
家でいうと、こんな感じです。
- 家の柱
- 部屋の配置
- ドアや窓の位置
- 何がどこにあるかの情報
つまり HTML がないと、ページは何も表示できません。 ただの「空っぽの土地」です。
CSSは“家のデザイン”
CSSは、HTMLで作った骨組みに色・形・デザインをつける役割です。
家でたとえると…
- 壁の色を決める
- 床の素材を変える
- 家具の配置を整える
- 窓の形を可愛くする
CSSによって、Webページはおしゃれに、見やすく、きれいになります。
JavaScriptは“家の電気や機械”
JavaScriptは、Webページを動かすための魔法です。
家でいうとこうです。
- スイッチを押すと電気がつく
- ボタンを押すとカーテンが開く
- 時計が動く
- 自動ドアが動く
つまり JavaScript は、 「ボタンを押したら何かが起きる」 という“動く仕組み”を作る担当です。
まとめ：3つそろうとWebページは完成する
家づくりに例えると、こうなります。
- HTML = 家の骨組み（中身）
- CSS = デザイン（見た目）
- JavaScript = 電気や機械（動く仕組み）
どれか1つ欠けても、しっかりしたWebページにはなりません。 3つがそろって、はじめて“ちゃんとした家（Webサイト）”ができます。
これさえわかれば、あなたもWebページを作れる
「HTML＝中身」「CSS＝見た目」「JS＝動く仕組み」 この3つだけ覚えれば、もうWeb制作のスタートラインに立っています。
次のステップでは、実際にHTMLを書いてみたり、 簡単なツールを自分で作ったりしていきましょう。
