【第1回】CSSってなに？｜CSS初心者ノート

🎨 CSSってなに？

CSSは Cascading Style Sheets の略。
Webページの「見た目」を整えるためのルールです。

• HTML = ページの骨組み（意味や構造）
• CSS = デザイン（色・大きさ・レイアウト）

👉 HTMLとCSSを組み合わせることで、見やすくておしゃれなページが作れます。

---

✏️ HTMLとの違い

• HTMLは「何が書いてあるか」を伝えるもの
• CSSは「どう見せるか」を決めるもの

例：

<p>こんにちは、みかおばです！</p>

このままだと黒文字で表示されますが、CSSを加えると…

p {
  color: red;
  font-size: 20px;
}

👇 表示結果
こんにちは、みかおばです！ （赤文字・20pxサイズ）

---

💻 CSSの書き方の基本

CSSは基本的にこの形で書きます👇

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

例：

p {
  color: blue;
  font-size: 16px;
}

• セレクタ → どのタグに適用するか（ここでは <p>）
• プロパティ → 何を変えるか（色、サイズなど）
• 値 → 具体的な指定（blue, 16px など）

---

✅ ポイントまとめ

• HTML = 骨組み、CSS = デザイン
• 基本形は 「セレクタ { プロパティ: 値; }」
• まずは文字の色やサイズを変えるところから始めよう

---

初心者がつまずきやすいポイントを、豊富な図解でやさしく解説

📌 次回予告

【第2回】文字色と文字サイズを変えてみよう
→ 実際に color と font-size を使って、文字のデザインを変えてみます！

---

🔖 この回で出てきたプロパティ
#color #font-size #CSS初心者ノート

---