この記事はこんな人におすすめ

プログラミング学習を始めたばかりで、基礎をちゃんと押さえたい方
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・クラウドまで、初心者歓迎・少人数のハンズオンイベントを定期開催しています。

👉 ハンズオンラボ connpass

参考

MDN Web Docs — HTML の基本
MDN Web Docs — CSS の基本
小森裕介『プロになるためのWeb技術入門』