HTML ＝ ホームページの中身と「骨組み」

HTML（エイチティーエムエル）は、ホームページの「中身」と「構造（骨組み）」を作るための言語です。

例えば、「ここは見出しです」「ここが段落です」「ここに画像を配置してください」といった指示を出すのがHTMLの役割です。index.html や `menu.html` などのファイルがこれにあたります。

• <h2>見出し</h2> → これは「大見出し」ですよ、という指示
• <p>文章</p> → これは「段落」ですよ、という指示
• <img src="images/..."> → これは「画像」ですよ、という指示

HTMLだけでもホームページは表示されますが、すべての文字が黒一色で左側に並ぶだけの、まったく装飾のない無骨なページになってしまいます。

CSS ＝ デザインと「装飾」

CSS（シーエスエス）は、HTMLが作った「骨組み」に対して、デザインや装飾を指定するための言語です。

「見出しの文字は大きく、青色にしてください」「段落の行間はこれくらい空けてください」「画像は丸く切り抜いてください」といった、見た目に関する指示はすべてCSSが担当します。`style.css` や `hp-creator.css` などのファイルがこれにあたります。

「家」と「インテリア」の例え

この2つの関係も「家づくり」で例えられます。

• HTML → 柱を立て、壁を作り、部屋を区切る「家の骨組み・間取り」
• CSS → 壁紙の色を決め、家具を配置し、照明を選ぶ「インテリア・内装」

つまり、文章や店名を変えたい時は「HTMLファイル（index.htmlなど）」を編集し、サイト全体の色や文字の大きさを変えたい時は「CSSファイル（style.cssなど）」を編集する、というのが基本になります。