基礎

1. 構造と装飾の分離

HTML = 文書構造、CSS = 見た目（装飾）。
これが現代のWebの大原則です。かつては <font> タグや align 属性でデザインしていましたが、今は完全にCSSの仕事です。

過去 vs 現在

❌ 過去（2000年代）

<font color="red" size="5">
  <b>タイトル</b>
</font>
<center>
  <table width="600">
    <tr>
      <td bgcolor="#cccccc">
        内容
      </td>
    </tr>
  </table>
</center>

HTMLに装飾が混在。変更が大変。

✓ 現代

<!-- HTML: 構造のみ -->
<article class="card">
  <h1>タイトル</h1>
  <p>内容</p>
</article>

/* CSS: 装飾のみ */
.card {
  max-width: 600px;
  margin: 0 auto;
}
.card h1 {
  color: red;
  font-size: 1.5rem;
}

HTMLはクリーン。CSSファイル1つで全体変更可能。

分離のメリット

🔧

保守性

CSSファイル1つの変更で、サイト全体のデザインを変更可能

♿

アクセシビリティ

スクリーンリーダーは意味のあるHTMLを読み上げる

🔍

SEO

検索エンジンはセマンティックなHTMLを正しく解釈

⚡

パフォーマンス

CSSはキャッシュ可能。インラインスタイルは毎回読み込み

📌 覚えておきたいポイント

<font>, <center>, align, bgcolor は全て非推奨
HTMLには <header>, <main>, <article> などのセマンティックタグを使う
スタイルは外部CSSファイルに記述（<link rel="stylesheet">）
インラインスタイル style="..." は緊急時のみ