レッスン1：CSSって何？

📖 導入 — HTMLだけだと、こんな見た目になる

前のHTMLコースで、ウェブページの「骨格」を作る方法を学びましたね。でも、HTMLだけで作ったページは白い背景・黒い文字・飾り気がない…という見た目になります。

お気に入りのウェブサイトみたいに、色やデザインをつけるには CSS を使います！

📝 CSSとは？

CSS（Cascading Style Sheets）は、ウェブページの「見た目」を整えるための言語です。HTMLが「骨格」なら、CSSは「服や化粧」のようなものです。

CSSは セレクタ・プロパティ・値 の3つで構成されます。

セレクタ {
  プロパティ: 値;
}

🤔 考えてみよう：color: red; の red を blue や #ff6600 に変えるとどうなる？ブラウザで試してみよう！

セレクタ：どのHTML要素に適用するか（例：h1、p）
プロパティ：何を変えるか（例：color、background-color）
値：どう変えるか（例：red、blue）

CSSは別ファイル（.css）に書いて、HTMLの <head> から読み込むのが一般的です。

<link rel="stylesheet" href="style.css">

部分	意味
`rel="stylesheet"`	「これはスタイルシートです」とブラウザに伝える
`href="style.css"`	読み込むCSSファイルの名前

💻 やってみよう！

ファイルを2つ用意する
practice フォルダの中に index.html と style.css を作ります。

HTMLを書く

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>CSSの練習</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>はじめてのCSS</h1>
    <p>文字の色と背景色を変えてみました！</p>
  </body>
</html>

CSSを書く

body {
  background-color: lightyellow;
}

h1 {
  color: darkblue;
}

p {
  color: green;
}

ブラウザで確認する
index.html をブラウザで開いて、黄色い背景に紺色の見出しと緑の文章が表示されたら成功です！ 🎉

⚠️ よくあるミス

スタイルが反映されない：HTMLファイルに <link rel="stylesheet" href="style.css"> を書き忘れていないか確認しよう。
セレクタ名のタイポ：HTMLで class="title" と書いたのに、CSSで .titel と書いてしまうとスタイルが当たらない。スペルを確認しよう。
セミコロンの忘れ：CSSのプロパティは color: red; のように最後に ; が必要。忘れると次のプロパティも効かなくなることがある。

📌 まとめ

✅ CSS はウェブページの見た目を整える言語
✅ セレクタ { プロパティ: 値; } の形で書く
✅ セレクタで「どの要素か」、プロパティで「何を変えるか」、値で「どう変えるか」を指定する
✅ CSSは別ファイルに書いて <link> タグでHTMLに読み込む

🚀 次のレッスンへ

次のレッスンでは、文字の大きさやフォントを変える方法を学びます！

🔍 もっと調べてみよう：「CSS セレクタ書き方」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！