【第6回】背景をつけよう｜CSS初心者ノート

🟦 背景色をつけてみよう（background-color）

背景色を指定するには、background-color プロパティを使います。

body {
  background-color: #f5f5f5;
}

👉 ページ全体に、やわらかいグレーの背景色がつきます。

---

主な指定方法はこちら👇

値	意味
red	赤色（色名指定）
#f5f5f5	明るいグレー（16進数）
rgb(255, 255, 255)	白（RGB指定）

💡 サイト全体の背景には薄めの色を使うと文字が読みやすくなります。
特定のボックスだけ色を変えたい場合は、クラスを使って指定します。

.box {
  background-color: #ffecec;
}

---

🖼 背景画像をつけてみよう（background-image）

画像を背景として設定したいときは、background-image を使います。

body {
  background-image: url("bg.jpg");
}

※「bg.jpg」は画像ファイル名の例です。
実際は自分の好きな背景画像のURLを入れて使ってみましょう！

これだけだと画像が繰り返されてしまうので、
以下のように調整すると自然に見えます👇

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

💡それぞれの意味
background-repeat → 画像を繰り返すかどうか
background-size → 画像の大きさ（coverで全体を覆う）
background-position → 画像の位置（centerで中央寄せ）

---

💡 よく使うプロパティ

プロパティ	意味	例
background-repeat	繰り返し設定	no-repeat / repeat / repeat-x
background-size	サイズ調整	cover / contain / 100%
background-position	表示位置	center / top / left

---

🧩 背景を組み合わせてみよう（ショートハンド）

色と画像を一緒に指定することもできます✨

.box {
  background: #fafafa url("flower.png") no-repeat center / cover;
}

💡 順番は「色 → 画像 → 繰り返し → 位置 → サイズ」です。
1行でまとめられるので、すっきりした書き方になります。

---

💻 実際のコード例

HTML部分：

<div class="card">
  <h2>CSSで背景をつけてみよう</h2>
  <p>背景色や背景画像を使うと、見た目がぐっと華やかになります。</p>
</div>

CSS部分：

.card {
  background: #f0f8ff url("pattern.png") no-repeat center / cover;
  padding: 40px;
  border-radius: 8px;
}

---

👀 実際の表示結果

CSSで背景をつけてみよう
背景色や背景画像を使うと、見た目がぐっと華やかになります。

（※🩵実際のブログでは、画像や色を自由に変えて試してみてください♪）

---

✅ ポイントまとめ

🎨 背景色を変える → background-color
🖼 画像を使う → background-image
🧩 組み合わせもOK → background（ショートハンド）
💡 明るい色やシンプルな模様を選ぶと、文字が読みやすい✨

---

HTMLやCSSの基礎をもっと学びたい方におすすめ👇

---

📌 次回予告

【第7回】ボックスモデル基礎
→ margin / padding / border を使って、ボックスの外側・内側の余白を整えてみましょう📦

---

🔖 この回で出てきたプロパティ

#background-color #background-image #background #background-repeat #background-size #background-position

---