HTML・CSS・JavaScriptの違いを超簡単に説明

HTML・CSS・JavaScript。この3つはWebサイトを作る時によく出てくる言葉ですが、最初はかなり混乱しやすいです。

難しく考えなくて大丈夫です。

一言でいうと、

HTML＝骨組み

CSS＝見た目

JavaScript＝動き

です。

家に例えるとかなりイメージしやすくなります。

HTMLは「骨組み」

HTMLはWebページの内容を作る役割です。

例えば、

・タイトル

・文章

・画像

・ボタン

などを配置します。

家でいうと、柱や壁を作る作業です。

骨組みがなければ家は作れません。

例：

「ここに見出しを置く」

「ここに画像を置く」

「ここにボタンを置く」

という土台を作っています。

CSSは「見た目」

HTMLだけだと、かなりシンプルなページになります。

そこでCSSを使います。

CSSは、

・文字の色

・文字の大きさ

・余白

・背景色

・デザイン

などを設定します。

家でいうと、

・壁紙を貼る

・家具を置く

・外観をオシャレにする

ようなイメージです。

例：

「ボタンを青色にする」

「文字を大きくする」

「画像を丸くする」

などです。

JavaScriptは「動き」

JavaScriptは、Webサイトに動きを付けます。

例えば、

・ボタンを押したらメニューが開く

・画像が自動で切り替わる

・スクロールしたらアニメーションする

・入力ミスを教えてくれる

などです。

家で例えると、

「自動ドア」や「電気が自動でつく仕組み」

みたいなものです。

超簡単にまとめると

HTML

→ 何を置くか決める（骨組み）

CSS

→ どう見せるか決める（デザイン）

JavaScript

→ どう動くか決める（機能）

最初はHTMLからがおすすめ

プログラミングを始めたばかりの人は、いきなり全部覚えようとすると混乱します。

おすすめの順番は、

HTML

↓

CSS

↓

JavaScript

です。

まずは「何を表示するか」を理解して、そのあと「見た目」、最後に「動き」を学ぶ方が理解しやすいです。

Webサイトは、この3つがチームのように協力して動いています。

最初は難しく見えますが、役割を知ると一気に分かりやすくなります。