HTML・CSS・JavaScriptってなに？～セツメイ鳥のセツメと学ぶ物語〜
登場キャラクター
- タロウ：プログラミング初心者の学生
- セツメ：IT用語についての仕組みを解説してくれる鳥
第1章：Web サイトを作りたい
タロウ：「Web サイトを作ってみたいんです。どうやって作るんですか？」
セツメ：「いい質問だね。まず、家を建てることを想像してみて」
タロウ：「家？」
セツメ：「そう。家を建てるには、木の枠組み、壁の色塗り、電気の配線など、いろんな作業が必要だよね」
タロウ：「あ、なるほど」
セツメ：「Web サイトも同じ。3 つの技術が組み合わさってできている。HTML、CSS、JavaScript。これらがそれぞれの役割をしてるんだ」
第2章：HTML は「骨組み」
HTML の役割
セツメ：「まず HTML。これは『骨組み』を作る言語なんだ」
タロウ：「骨組み？」
セツメ：「そう。家で例えるなら、木の枠組み。ページの基本構造を作る。『ここに見出し』『ここに段落』『ここに画像』という指示書みたいなものだよ」
<h1>私のプロフィール</h1>
<p>こんにちは、タロウです。</p>
<img src="photo.jpg" alt="私の写真">
<button>詳細を見る</button>
特徴
- 見出し、段落、画像、ボタンなど、ページの 構造 を作る
- 「ここに何を置く」という指示書
- HTML だけではページは地味。色も装飾もない
第3章：CSS は「装飾」
CSS の役割
タロウ：「HTML だけだと、つまらないね」
セツメ：「そうだなんだ。そこで CSS の登場だよ」
タロウ：「CSS？」
セツメ：「Cascading Style Sheet。要するに『デザイン』。壁を塗ったり、床のタイルを敷いたり…ページを『きれいに見せる』ための言語なんだ」
h1 {
color: red;
font-size: 32px;
text-align: center;
}
button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
特徴
- HTML で作った要素の 見た目 を変える
- 色、大きさ、位置、フォント、背景など装飾を担当
- 同じ HTML でも CSS で全く別の見た目になる
第4章：JavaScript は「動き」
JavaScript の役割
タロウ：「ページが綺麗になったね。でも…何かつまらない」
セツメ：「そう感じたら JavaScript の出番だよ」
タロウ：「また新しい技術？」
セツメ：「そう。HTML で骨組み、CSS で装飾。最後に JavaScript で『動き』を付ける。ボタンを押したら何かが起きるとか、ユーザーの操作に反応するようにするんだ」
// ボタンがクリックされたら
document.getElementById("button").onclick = function() {
alert("ボタンが押されました！");
};
// フォームの値をチェック
function checkForm() {
const name = document.getElementById("name").value;
if (name === "") {
alert("名前を入力してください");
return false;
}
return true;
}
特徴
- ページを 動かす 言語
- ボタンクリック、フォーム入力など、ユーザーの操作に反応
- データを計算したり、サーバーと通信したり
第5章：3 つを合わせると
セツメ：「つまりね、Web サイトってのは…」
タロウ：「HTML が骨組み、CSS が装飾、JavaScript が動きだね」
セツメ：「その通り。もう一度整理しよう」
| 技術 | 役割 | 例 |
|---|---|---|
| HTML | 構造・骨組み |
<h1>見出し</h1>, <img src="...">
|
| CSS | 装飾・見た目 | 色、大きさ、位置、背景 |
| JavaScript | 動き・インタラクション | ボタンクリック反応、計算、API通信 |
セツメ：「この 3 つが揃って、初めて『Web サイト』と呼べるんだ」
タロウ：「なるほど。では早速作ってみます！」
おさらい
Web 開発の 3 本柱
Webサイトを作るには、必ずこの 3 つが必要です。
- HTML：ページの骨組み。何を表示するかを決める
- CSS：ページの見た目。どう見せるかを決める
- JavaScript：ページの動き。どう動くかを決める
何か 1 つ欠けても、Web サイトは成り立ちません。
Amazon の買い物ページを見てください。商品一覧（HTML）、商品のカード風デザイン（CSS）、「追加」ボタンのクリック反応（JavaScript）。すべてが組み合わさってます。
Twitter、Facebook、Instagram、YouTube…すべてのサービスで HTML・CSS・JavaScript が使われています。
つまり Webの 99% はこの 3 つでできている んです。
最後に、今後もエンジニアの方にとって有益となるような記事を投稿していきます。
いいなと思ったらぜひいいね、フォローお願いします！
また、他にも解説してほしい用語や技術があればご気軽にコメントを残してください！
それでは。