〜HTMLとCSSを「建築と内装」に例えたら全部つながった〜
こんにちは！ハンズオンラボ運営のえむです。
ハンズオンでHTMLとCSSを教えていると、必ずと言っていいほど出てくる疑問があります。
「HTMLで書いて、CSSで装飾して……って、結局どう違うんですか？」
この記事では、そのモヤモヤを 建築と内装 に例えてスパッと解消します！
この記事はこんな人におすすめ
- プログラミング学習を始めたばかりで、基礎をちゃんと押さえたい方
- HTMLとCSSの違いを「なんとなく」で止めている方
- コードを見ても何をしているのかピンとこない方
結論から言うと、ズバリこれです！
HTML ＝ 「建物の骨組み・構造」
CSS ＝ 「内装・デザイン・見た目」
大工（HTML）が家の骨格を作り、インテリアデザイナー（CSS）が部屋をおしゃれに仕上げる——そんなイメージです。
同じ骨組みでも、内装を変えればまったく違う部屋になる。それがHTMLとCSSの関係です。
1. HTMLの役割（家の骨組み）
HTMLは「HyperText Markup Language」の略で、Webページの 構造と内容 を作るものです。
「ここは見出し」「ここは段落」「ここは画像」——というように、コンテンツの種類を タグ で囲んで指定します。
<!-- HTMLで書いた骨組み -->
<h1>ようこそ！私のページへ</h1>
<p>ここは本文です。テキストが入ります。</p>
<img src="photo.jpg" alt="写真">
<a href="https://example.com">リンクはこちら</a>
🏗️ よく使うタグ（建材の種類）
<h1>〜<h6> ： 見出し（大梁・小梁みたいなもの）
<p> ： 段落（部屋の区切り）
<a> ： リンク（ドア）
<img> ： 画像（窓）
<div> ： 汎用の箱（仕切り壁）
<ul><li> ： リスト（棚の段）
HTMLだけで作ったページは、こんな感じです。文字と画像が並んでいるだけで、飾り気がありません。骨格はあるけど、壁紙も家具もない状態ですね。
2. CSSの役割（内装・デザイン）
CSSは「Cascading Style Sheets」の略で、HTMLで作った骨組みに 見た目を与える ものです。
「この見出しは赤くして」「この文字は大きく」「ここは右に寄せて」——という指示を出します。
/* CSSで装飾 */
h1 {
color: red; /* 文字を赤に */
font-size: 32px; /* 文字の大きさ */
text-align: center; /* 中央揃え */
}
p {
color: gray;
line-height: 1.8; /* 行間を広げる */
}
🎨 CSSでできること（内装の種類）
color ： 文字色（壁紙の色）
font-size ： 文字の大きさ（照明の明るさ）
margin ： 外側の余白（家具と壁の距離）
padding ： 内側の余白（クッションの厚さ）
background ： 背景（床材・カーペット）
border ： 枠線（額縁・仕切り）
3. HTMLとCSSをつなぐ方法
内装デザイナーが「あの柱にこの壁紙を貼ってください」と指示するように、CSSは「どのHTML要素に」スタイルを適用するかを セレクター で指定します。
/* タグで指定 */
h1 { color: blue; }
/* クラスで指定（HTMLに class="red-text" がついているもの） */
.red-text { color: red; }
/* IDで指定（HTMLに id="main-title" がついているもの） */
#main-title { font-size: 40px; }
<!-- HTMLにクラスやIDをつける -->
<h1 id="main-title">メインタイトル</h1>
<p class="red-text">この文字だけ赤くしたい</p>
<p>ここは普通の文字色</p>
🏠 同じ骨組み、違う内装
HTMLは一切変えずに、CSSを書き換えるだけでページの見た目を大きく変えられます。これがHTMLとCSSを分けている最大の理由です。
4. ボックスモデル（すべての要素は「箱」）
CSSを学ぶうえで最重要の概念が ボックスモデル です。
Webページのすべての要素は「見えない箱」として扱われます。
【ボックスモデルのイメージ】
+--------------------------------------------+
| margin（外側の余白） |
| +------------------------------------+ |
| | border（枠線） | |
| | +----------------------------+ | |
| | | padding（内側余白） | | |
| | | +--------------------+ | | |
| | | | content（中身） | | | |
| | | +--------------------+ | | |
| | +----------------------------+ | |
| +------------------------------------+ |
+--------------------------------------------+
部屋（content）の周りに廊下（padding）、壁（border）、建物と建物の間隔（margin）がある——というイメージです。
「なんか要素同士がくっついちゃう……」「余白がうまく取れない……」という悩みの9割はこのボックスモデルを理解すれば解決します。
まとめ
HTMLは「骨組み・構造」。タグで内容の種類を定義する。
CSSは「内装・デザイン」。セレクターで対象を指定し、見た目を整える。
すべての要素はボックス（margin・border・padding・content）で成り立っている。
HTMLとCSSは別々に書くことで、「構造」と「デザイン」の責任を分けています。これによって、デザインだけ変えたいときにHTMLを触らずに済む、という利点があります。
骨組みと内装を分けて考えると、Webページの作り方がぐっとクリアになります。まずはHTMLで構造を作って、CSSで色や大きさを足してみましょう！
ハンズオンで実際に手を動かしてみませんか
「読んで理解する」だけでなく「作って体感する」ことが一番の近道。HTML/CSS・JavaScript・クラウドまで、初心者歓迎・少人数のハンズオンイベントを定期開催しています。
参考
- MDN Web Docs — HTML の基本
- MDN Web Docs — CSS の基本
- 小森裕介『プロになるためのWeb技術入門』