【保存版】HTMLとCSSの違いを「Gemini先生のコード」で徹底解剖！

コーディングを始めると最初にあたる壁、「HTMLとCSSって何が違うの？」という疑問。今回は、AI（Gemini）と作成した実際のコードを教科書にして、その役割を直感的に理解できるよう整理しました。

🏠 例えで理解する「家づくり」
HTMLの役割（文章の構造）
CSSの役割（見た目のデザイン）
🤔 よくある疑問
1. まとめ：役割を知れば、もう迷わない
あとがき：AIと格闘した先に

🏠 例えで理解する「家づくり」

■ HTMLは「骨組み・間取り」
ここに柱を立てる、ここに窓を作る、といった「構造」を決めます。

■ CSSは「内装・外壁」
壁紙を白くする、カーテンを青くする、といった「見た目」を整えます。

HTMLの役割（文章の構造）

HTML（HyperText Markup Language）は、Webサイトの「骨組み」や「意味」を作る言語です。コンピュータはHTMLを読んで、「ここは見出し」「ここは文章」と判断します。

<div>：コンテンツを囲む「箱」を作ります。
<img>：画像を表示します。src=”…”で画像の場所を指定します。
<p>：段落（文章のまとまり）を作ります。

CSSの役割（見た目のデザイン）

CSS（Cascading Style Sheets）は、HTMLで作った骨組みに「お化粧」や「服」を着せる言語です。CSSがあることで、情報の優先順位が分かりやすくなり、読み手に安心感を与えます。

background-color：背景の色。サイトの雰囲気を決定づけます。
border-radius：角の丸み。大きくするとポップに、小さいと誠実な印象になります。
margin / padding：余白。「情報の呼吸」を整え、読みやすさを爆上げします。

💻 実践：コードの解剖説明書

<div style=”background-color: #f0f7ff; border-radius: 12px;”><img style=”width: 45px; border-radius: 50%;” src=”…”><p>今日の教訓</p></div>

赤マーカー：HTMLタグ（ここは何者か？を示す）

橙マーカー：CSS指示（どんな見た目か？を示す）

🤔 よくある疑問

Q. HTMLの中に直接CSSを書くのはダメなの？
A. 今回のように特定のブロックだけを装飾するならOKです！ただ、サイト全体で使い回すデザインはCSSファイルに分けるのがプロのやり方です。

Q. どっちから勉強すべき？
A. まずはHTMLで「文章」が書けるようになりましょう。その後にCSSで色をつける、という順番が一番挫折しにくいですよ。

あとがき：AIと格闘した先に

manao

正直、コードの知識がない私には、Geminiが作ったコードのどこが正解でどこが間違いなのか、確認する術もありません。エンジニアの方が見たら「あれ？」と思う部分もあるかもしれませんね。

でも、わからないなりにAIと対話して、そのままの形で発信すること。それがいつか、同じ初心者の方や、AIを開発する方にとっての「反面教材」や「ヒント」としての価値になればと願って、この記事を公開します。