最初の CSS：ページに色をつけよう

CSS 言語に出会って、1995年みたいな見た目から卒業しよう。

見てみよう：CSS とは

HTML はページの骨組み。CSS は服：色、フォント、サイズ、余白。別ファイルに書いて、こんな感じ：

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

声に出して読むと：「すべての h1 見出し、濃い青に。すべての p 段落、18ピクセルで濃いグレーに。」

各ルールは3パーツ：

プロパティと値の間はコロン、各行の末尾はセミコロン。セミコロン忘れは CSS で世界一多いミス。

my-website フォルダ内に style.css という新ファイルを作る。
すべての HTML ページの <head> 内にこの1行を追加：
```
<link rel="stylesheet" href="style.css">
```
「このページの見た目は style.css にあるよ」と伝える。
動いてるかテスト——style.css に目立つものを入れる：
```
body {
  background-color: yellow;
}
```
保存してページを更新。全部黄色？動いてる！（黄色は消してOK。）

色は英語（red、darkblue、lightgray、tomato、gold…）か、# から始まる コード で：#1d4ed8 は青、#16a34a は緑。htmlcolorcodes.com で好きな色コードを見つけよう。

サイトに最初の色をつけよう。style.css で：

答え——色は自由に変えてOK：

🏫 学校サイト——答え

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

青は学校サイトに合う——信頼感（銀行も青を使う！）。

🙋 個人サイト——答え

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

個人サイトは大胆に——温かいオレンジは「ここは生きてる」感じ。

🌍 旅行日記——答え

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

森や草原みたいな緑——旅行日記にぴったり。

⚽ クラブサイト——答え

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

クラブカラー がベスト——赤でプレー？なら赤！

⚠️

読みやすさルール： 明るい背景に暗い文字（またはその逆）。白に薄い黄色は読めない。迷ったら誰かに聞く：「読みやすい？」

✅

確認： サイトに自分の色がある——CSS が1ファイルで全ページにリンクされてるから、一度に全部色付き。賢いでしょ？