HTMLやCSSを学び始めたばかりの頃って、「結局それぞれ何が違うの？」「divって何のためにあるの？」「classとidってどっちを使えばいいの？」って迷っちゃいますよね。
そんな疑問を、私の地元仙台の銘菓喜久福を使って一緒に解消しましょう！
喜久福ってどんなお菓子？
喜久福は仙台の老舗お茶・菓子屋さんが作る生クリーム大福です。
お餅と餡、生クリームの3層構造になっています。
甘すぎず、かといって餡が重すぎず何個でも食べられちゃうので、私も大好きなお菓子です。
この構造が、HTMLとCSSの関係をそのまま表しているんです。
HTML ── 骨組みの設計図
HTMLは「何をどの順番で配置するか」を決める骨組みです。
見た目（色や形）はまったく関係なく、構造だけを決めます。
喜久福で言うと：
「外側にお餅を置いて、その中にあんこを入れて、さらにその中に抹茶クリームを入れる」
という盛りつける順番の設計図のようなものです。
<!-- HTMLは構造だけを決める -->
<div> <!-- お餅（外側） -->
<div> <!-- あんこ（中間） -->
<div></div> <!-- 抹茶クリーム（中心） -->
</div>
</div>
※この時点では、まだサイズや色がないのでブラウザの画面には何も表示されません
CSS ── 味付けと見た目
CSSは「見た目やデザインを整える」役割を持ちます。
HTMLで決めた骨組みに対して、サイズ・形・色を後から塗るイメージです。
喜久福で言うと：
「お餅は白くてふわっと丸く、あんこは小豆色、抹茶クリームは深緑に」
という味付けと盛り付けの見た目にあたります。
/* CSSで見た目を整える */
.mochi {
background-color: #f9f9f9; /* お餅の白 */
border-radius: 30%; /* 丸くする */
}
.anko {
background-color: #641f04; /* あんこの小豆色 */
border-radius: 30%;
}
.macya {
background-color: #0a4602; /* 抹茶の深緑 */
border-radius: 30%;
}
ただし、このCSSにはまだwidthやheightを書いていないので、この時点では画面に何も表示されません。次のclassのセクションで、サイズも含めた完成形のコードを見ていきましょう！
div ── 「箱」で包む仕切り
HTMLには見出しを作る <h1> や表を作る <table> など、いろんなパーツがあります。
その中で <div> はエリアを決めるための透明な箱です。
喜久福のように、抹茶をあんこで包み、さらにお餅で包む。そんな入れ子の箱を作るのが div の役割です。
div 自体は透明な四角い箱なので、CSSで色をつけて角を丸めてはじめて、大福らしく見えます。
<div class="mochi"> <!-- 外側の箱（お餅） -->
<div class="anko"> <!-- 中間の箱（あんこ） -->
<div class="macya"> <!-- 中心の箱（抹茶クリーム） -->
</div>
</div>
</div>
class ── 「ラベル」と「レシピの使いまわし」
classには2つの役割があります。
役割① CSSへの目印（ラベル）
classを付けなくても、HTMLに直接CSSを書けばスタイルは反映できます。
<!-- classなし：HTMLに直接書く -->
<div style="width: 200px; height: 120px; background-color: #f9f9f9; border-radius: 30%; display: flex; justify-content: center; align-items: center;">
<div style="width: 160px; height: 80px; background-color: #641f04; border-radius: 30%; display: flex; justify-content: center; align-items: center;">
<div style="width: 120px; height: 40px; background-color: #0a4602; border-radius: 30%;">
</div>
</div>
</div>
でも、これが2個・3個と増えるたびに同じコードを何度も書く必要があります。
実際のアプリケーションはファイルが膨大なので、HTMLに直接書くとものすごく読みづらくなります。
そこで、HTMLとCSSをファイルごと分けたいわけですが、分けた瞬間にCSS側は「どこにスタイルを当てればいいかわからない」状態になります。
class（名前タグ）を貼ってあげることで、CSS側が
「
.ankoにあんこ色を塗って」
と指示できるようになります。これが目印としての役割です。
役割② パーツの使いまわし（レシピ）
一度 .mochi や .anko のレシピ（CSS）を作ってしまえば、あとはHTML側でそのclass名を呼び出すだけ。
抹茶・生クリーム・ほうじ茶と、中心の色を変えるだけで何個でも喜久福が作れます。
<!-- classあり：ラベルを貼るだけでOK -->
<!-- 抹茶味 -->
<div class="mochi">
<div class="anko">
<div class="macya"></div>
</div>
</div>
<!-- 生クリーム味 -->
<div class="mochi">
<div class="anko">
<div class="cream"></div>
</div>
</div>
<!-- ほうじ茶味 -->
<div class="mochi">
<div class="anko">
<div class="houjicha"></div>
</div>
</div>
/* 共通パーツ（一度書けばOK） */
.mochi {
width: 200px;
height: 120px;
background-color: #f9f9f9;
border-radius: 30%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.anko {
width: 160px;
height: 80px;
background-color: #641f04;
border-radius: 30%;
display: flex;
justify-content: center;
align-items: center;
}
/* 中心だけ味ごとに書く */
.macya, .cream, .houjicha {
width: 120px;
height: 40px;
border-radius: 30%;
}
.macya { background-color: #0a4602; }
.cream { background-color: white; }
.houjicha { background-color: #8B4513; }
mochi と anko は共通のまま、中心のクラスだけ変える。これがclassの便利さです。
id ── 「一点もの」の名前タグ
classと似ていますが、idはページの中で1つだけしか使えない名前タグです。
喜久福で例えると：
classは「抹茶味」「生クリーム味」というフレーバーの種類（同じものが何個もある）
idは「本日の限定品」という一点もの（ページ内に1つしかない）
classとidの違い
| class | id | |
|---|---|---|
| 使える数 | 何個でも | ページ内に1つだけ |
| 書き方（HTML） | class="mochi" |
id="special" |
| 書き方（CSS） | .mochi { } |
#special { } |
| 主な用途 | 共通デザインの使いまわし | 特定の1要素にスタイルやリンクを当てる |
コードで見てみよう
<!-- id：ページ内で1つだけの特別な喜久福 -->
<div id="special-kikufuku" class="mochi">
<div class="anko">
<div class="macya"></div>
</div>
</div>
<!-- class：何個でも作れる通常の喜久福 -->
<div class="mochi">
<div class="anko">
<div class="cream"></div>
</div>
</div>
<div class="mochi">
<div class="anko">
<div class="houjicha"></div>
</div>
</div>
/* classはドット（.）で指定 */
.mochi {
width: 200px;
height: 120px;
background-color: #f9f9f9;
border-radius: 30%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
/* idはシャープ（#）で指定 */
#special-kikufuku {
border: 3px solid gold; /* 特別な喜久福には金の縁取り */
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
idは #（シャープ） で指定するのが特徴です。
idのもう一つの使いみち：ページ内リンク
idはCSSだけでなく、ページ内の特定の場所にジャンプするリンクにも使えます。
<!-- 目次からジャンプするリンク -->
<a href="#macya-section">抹茶味の説明を見る</a>
<!-- ジャンプ先 -->
<div id="macya-section">
<h2>抹茶味について</h2>
<p>宇治抹茶を使用した、甘さ控えめの一品です。</p>
</div>
Webページの目次やナビゲーションでよく使われる書き方です。
結局どっちを使えばいい？
迷ったら classを使う のがおすすめです。
「このスタイル、他のところでも使いたくなるかも？」→ class
「このページにこの要素は絶対1つだけ」→ id（例：ヘッダー、フッター、メインコンテンツ）
まとめ
| 概念 | 喜久福での例え | 役割 |
|---|---|---|
| HTML | 「お餅→あんこ→クリーム」の盛りつけ設計図 | 構造・骨組みを決める |
| CSS | お餅の白、あんこの小豆色、抹茶の深緑 | 見た目・デザインを整える |
| div | お餅・あんこ・クリームそれぞれの「箱」 | エリアを区切る透明な箱 |
| class | 「抹茶味」「生クリーム味」というフレーバーラベル | 共通デザインを何度でも使いまわす |
| id | 「本日の限定品」という一点もの | ページ内で1つだけの要素を指定する |
HTMLとCSSの関係、最初はとっつきにくいですが、喜久福の層構造で考えると「なるほど！」ってなりませんか？
仙台に来る機会があれば、ぜひ喜久福を食べながらコードを思い出してみてください。