HTML・CSS・JSの違い

HP（ホームページ）を作るときに出てくる3つの言葉を家づくりにたとえて説明

1. ひとことで言うと

ホームページは 3つの担当が力を合わせて出来ています
🧱 HTML＝骨組み（中身）　🎨 CSS＝見た目（かざり）　⚡ JS＝動き（しかけ）

2. 家づくりにたとえると

同じ家を 3つの担当が順番に仕上げる

🧱 HTML（エイチティーエムエル）

骨組み・中身　柱を立てて部屋・ドア・窓を作る。
見出し・文章・画像・ボタンなど「何があるか」を置く担当。

↓

🎨 CSS（シーエスエス）

見た目・かざり　壁紙の色床の素材家具の配置。
「どんな見た目にするか」を決める担当（色・大きさ・余白・並べ方）。

↓

⚡ JS（ジャバスクリプト）

動き・しかけ　スイッチ自動ドアインターホン。
「押したら開く」「送信したら届く」など動く仕掛けを付ける担当。

ℹ 順番が大事
骨組み（HTML）が無いとかざり（CSS）もしかけ（JS）も付ける場所がない。
だから HTML → CSS → JS の順で作っていきます。

3. 3つの担当をもう少し詳しく

🧱

HTML ＝中身・構造

「ここは見出し」「ここは画像」「ここはボタン」と内容に名札をつける。文章だけのスッピン状態でも一応ページとして読める。

🎨

CSS ＝見た目・デザイン

色・文字の大きさ・余白・横並びなどを指定して一気にキレイにする。同じHTMLでもCSSを変えるだけで雰囲気がガラッと変わる。

⚡

JS ＝動き・機能

クリックで開閉するメニュー画像スライド入力チェックお問い合わせ送信など「動く・反応する」部分を担当。

4. 並べて比べる

5. よくある勘違い

Q. 3つとも自分で書かないとHPは作れない？

いいえ。STUDIOやWix・ペライチなどのノーコードツールや WordPressのテーマを使えば 3つを直接書かなくても作れます。仕組みを知っていると細かい調整やトラブル対応がしやすくなります。

Q. HTMLは「プログラミング言語」？

厳密には違います。HTMLとCSSは「中身と見た目を指定するための書き方」で計算や判断はしません。判断して動くのはJS（こちらはプログラミング言語）です。

6. お客さんに説明するときの一言

「ホームページは家づくりと同じで
🧱 HTMLが骨組み　🎨 CSSが内装の見た目　⚡ JSが動くしかけ。
この3つが合わさって1つのページになります」

HTML・CSS・JS の違い