はじめに：Webサイトのしくみってどうなってるの？
Webサイトを作るとき、「HTML」「CSS」「JavaScript」という言葉をよく聞きますよね。でも、それぞれ何をしているのか、正直よくわからない…という方も多いのではないでしょうか？
この記事では、Web制作に欠かせない3つの基本用語について、やさしく・わかりやすく解説します！
【1】HTMLとは？：家の“骨組み”のようなもの
HTML（エイチ・ティー・エム・エル）は、Webページの構造を作る言語です。
たとえば、あなたが見ているブログやニュースサイトも、以下のような構造でできています：
- 見出し（タイトル）
- 本文
- 画像
- リンク（他のページへの案内）
これらを「ここが見出しだよ」「ここは画像だよ」と**マーク（タグ）で囲んで表すのがHTMLです。
📝 例：
<h1>こんにちは、世界！</h1>
<p>これは本文です。</p>
<img src=”image.jpg” alt=”画像の説明”>
【2】CSSとは？：サイトの“洋服”や“デザイン”担当
CSS（シー・エス・エス）は、HTMLで作った構造に色や形、配置などのデザインを加えるための言語です。
HTMLが「骨組み」なら、CSSは「見た目」を整えるおしゃれ担当。
- 文字の色を赤くする
- フォントを変える
- 画像を真ん中に表示する
- 背景に色をつける
といったことができます。
📝 例：
h1 {
color: red;
text-align: center;
}
【3】JavaScriptとは？：動きをつける“魔法使い”
**JavaScript（ジャバスクリプト）**は、Webサイトに動きをつける言語です。
「ボタンを押すと画像が切り替わる」「スクロールするとふわっと要素が出てくる」「カートに商品が追加される」…
こういったインタラクティブ（双方向的）な動きは、ほとんどJavaScriptで実現されています。
📝 例：
document.getElementById(“btn”).onclick = function() {
alert(“ボタンが押されました！”);
}
まとめ：この3つがWebの基本三兄弟！
| 用語 | 役割 | たとえ |
|---|---|---|
| HTML | 構造を作る | 家の骨組み |
| CSS | デザインを整える | 洋服・インテリア |
| JavaScript | 動きをつける | 家電やスイッチ |
Web制作において、この3つは基本中の基本。
難しそうに見えて、少しずつ触ってみると意外と楽しい世界が広がっています。
まずは「見るだけ・触るだけ」でもOK
初めから全部理解する必要はありません。
まずは身の回りのWebサイトを見て、「これってHTMLでどうなってるのかな？」と観察するだけでも立派な勉強になります。
ちょっとした興味から、Webの世界に一歩踏み出してみませんか？