たとえるなら

家づくりにたとえると、HTMLが柱と壁、CSSが壁紙とインテリア、JavaScriptが電気やドアの開閉です。柱だけの家(HTMLだけ)でも住めなくはないですが、飾り付け(CSS)と動く設備(JavaScript)がそろって、初めて快適な家になります。

JavaScript ページの動きを作る CSS 見た目の飾り付け HTML 文章の骨組み(土台)
骨組みの上に飾り付けと動きが乗る。3つの役割分担でWebページはできている。

もう少しくわしく

あなたが見ているWebページは、ほぼすべてこの3つの言葉でできています。HTMLは「ここが見出し、ここが本文、ここが画像」という文章の構造(骨組み)を書くための言語です。HTMLだけでもページとして表示はできますが、飾り気のない文書のような見た目になります。

CSSは「見出しは大きな青い文字に、写真は丸く切り抜いて」という見た目の飾り付けを担当します。そしてJavaScriptは「ボタンを押したらメニューが開く」「入力ミスがあればその場で警告を出す」といったページ上の動きを作るプログラミング言語です。3つは役割が違うだけで、優劣があるわけではありません。

ブラウザはこの3つを受け取って、その場で画面を組み立てています。役割が分かれているおかげで、「見た目だけ変えたいときはCSSだけ直す」という分業ができ、大人数での開発がしやすくなっています。Web制作を学ぶときも、HTML→CSS→JavaScriptの順に触れるのが定番の道筋です。

現場での使われ方

「その見た目の調整なら、CSSだけで直せますよ」

プログラムの本体を触らなくても、飾り付け担当のCSSの修正だけで対応できる、という見積もりの話です。

「この画面、JavaScriptが多くて動きが複雑なんです」

ページ上の動きを作る処理がたくさんあり、修正やテストに手間がかかる、という状況の説明です。

よくある質問

JavaScriptとJavaは同じものですか?

名前は似ていますが別の言語です。JavaScriptは主にWebページの動きを作る言語、Javaは業務システムやAndroidアプリなどで使われる言語で、生まれも用途も異なります。現場でも混同しないよう注意される定番ポイントです。

HTMLとCSSはプログラミング言語ですか?

厳密には、HTMLは文書の構造を示す「マークアップ言語」、CSSは見た目を指定する「スタイルシート言語」と呼ばれ、計算や判断の手順を書くプログラミング言語とは区別されます。ただし現場では広くひとまとめに語られることも多いです。

関連用語

GUIDE

職種図鑑

この用語を使って働く人たちは、どんな仕事をしているの?

見てみる →
GUIDE

ITの学び方

もっと知りたくなったら。初心者向けの教材の選び方を案内します。

見てみる →