HTML・CSS・JavaScriptの違いを動く例で理解する

Webページを作り始めると、HTML・CSS・JavaScriptが同時に登場します。最初から三つを同じ深さで学ぶ必要はありません。まず「構造・見た目・動作」の役割を区別すると、どこを直すべきか判断しやすくなります。

同じボタンでも役割が違う
1枚のHTMLで、三つの役割を切り分ける
HTMLはマークアップ言語
困ったことから使う技術を選ぶ
最初の学習順
参考にした公式資料
次に読む記事

同じボタンでも役割が違う

「結果を表示する」というボタンを例にすると、HTMLはボタンという要素を置き、CSSは色や間隔を調整し、JavaScriptは押した後の計算や表示を処理します。HTMLだけでも文章とリンクを持つページは作れます。

<button type="button">結果を表示する</button>

このHTMLだけでは計算は行いません。一方、a要素でリンク先を指定すれば、JavaScriptなしでも別のページへ移動できます。動きがあるものはすべてJavaScript、という分類でもありません。

1枚のHTMLで、三つの役割を切り分ける

練習用の空フォルダを作り、次の全体をindex.htmlとしてUTF-8で保存します。ファイルをブラウザで開くと、「制作ノート」とボタン、開閉できる説明が表示されます。外部サービスへの登録やライブラリは不要です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML・CSS・JavaScriptの役割</title>
  <style>
body { margin: 0; padding: 20px; font-family: sans-serif; line-height: 1.8; color: #17352e; }
button { padding: 8px 16px; background: #164c3e; color: white; }
details { margin-top: 24px; }
  </style>
</head>
<body>
<h1>制作ノート</h1>
<p id="message">ボタンを押す前です。</p>
<button id="change" type="button">文章を変える</button>
<details><summary>HTMLだけで開閉する説明</summary><p>この開閉にはJavaScriptを書いていません。</p></details>
<script>
document.querySelector("#change").addEventListener("click", () => {
  document.querySelector("#message").textContent = "JavaScriptで文章を変えました。";
});
</script>
</body>
</html>

この例では、同じファイルの中で役割を見比べられるよう、CSSをstyle要素、JavaScriptをscript要素に書いています。HTML・CSS・JavaScriptを一緒に使うことと、同じ役割を持つことは別です。

h1の「制作ノート」を「学習ノート」に変え、保存・再読み込みします。見出しの内容が変わるのがHTMLの変更です。
buttonのbackgroundを#175ea8へ変えます。文章を変えずにボタンの色が変わるのがCSSの変更です。
「文章を変える」を押します。見出しの下の文章が「JavaScriptで文章を変えました。」へ変われば、クリック時の処理が動いています。
detailsの説明も開閉します。これはブラウザが備えているHTMLの動作で、この例のJavaScriptからは操作していません。

さらにscript要素全体だけを削除したコピーを作ると、ボタンを押しても文章は変わらず、detailsの開閉は残ります。「見た目が動くから全部JavaScript」と覚えるより、どの処理を誰が担当しているかを区別できます。

ボタンが動かないときは、idのchangeとmessage、querySelectorの文字列が一致するかを確認します。今回はscriptを要素より後ろに置いているため、対象が作られた後で処理を登録できます。

ボタンで文章を変える練習と、HTML標準の開閉要素を表示した実画面。 — 本文の練習コードをブラウザで表示した例です。

HTMLはマークアップ言語

段落、見出し、一覧、画像など、内容の意味を要素で示します。繰り返し計算や条件分岐を行うプログラムを書く言語とは役割が異なります。ページの主題には見出し、文章には段落を使い、装飾目的でタグを選ばないようにします。

困ったことから使う技術を選ぶ

したいこと	最初に見る場所
本文やリンク先を変える	HTML
文字を中央に置く、余白を変える	CSS
入力値から合計を計算する	JavaScript
利用者ごとのデータを保存する	サーバー側・データベースの仕組みも検討