CSS コース

✓ ✓ 3 4 5 6

3 STEP 3 / 6

レッスン3：背景と枠線

⏱ 約25分やってみよう 1 クイズ 1

🎯 このレッスンで学ぶこと

background-colorで背景色を設定できます。
borderで枠線を追加できます。
border-radiusで角を丸くできます。
paddingとmarginで余白を調整できます。

📖 前回の復習（レッスン2）

color で文字色、font-size で文字サイズを変える
font-weight: bold で太字、text-align で文字の揃え方を指定する
font-family でフォントの種類を変えられる

📖 導入 — カードデザインを作ってみよう

SNSのプロフィールや、ショッピングサイトの商品一覧…よく見ると、情報が「カード」のような四角いボックスにまとまっていますよね。このレッスンでは、背景・枠線・余白を組み合わせて、そういったカードデザインを作る方法を学びます！

📝 背景・枠線・余白のプロパティ

背景色： / 背景画像：

div {
  background-color: #f0f4ff;
}

body {
  background-image: url("images/bg.jpg");
  background-size: cover; /* 画像を画面全体に広げる */
}

▶ プレビュー

💡 background-size の値:
・cover: 画像を要素全体に広げる（はみ出た部分は切れる）
・contain: 画像全体が見えるように収める（余白ができることがある）
背景画像を使うときは cover が一般的です。

枠線：

太さ・種類・色 の順に書きます。

div {
  border: 2px solid #cccccc;
}

▶ プレビュー

種類の値	見た目
`solid`	実線
`dashed`	破線
`dotted`	点線

角丸：

div { border-radius: 8px; }  /* 少し丸い */
div { border-radius: 50%; }  /* 完全な円になる */

▶ プレビュー

個別の枠線：など

上下左右の枠線を個別に指定できます。見出しの下線によく使います。

h2 {
  border-bottom: 3px solid #4338ca;
  padding-bottom: 8px;
}

▶ プレビュー

グラデーション：

2色以上を滑らかに変化させる背景を作れます。

div {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 24px;
  border-radius: 8px;
}

▶ プレビュー

135deg は角度（左上→右下）。to right（左→右）や to bottom（上→下）とも書けます。色の組み合わせを変えて試してみましょう。

ボタンやヘッダーの背景に使うと、おしゃれなデザインになります。

💡 グラデーションの色を増やす:
3色以上も指定できます:
background: linear-gradient(to right, red, yellow, green);
虹色のような効果も作れます。ジェネレーターツールで色を選ぶと簡単です。

内側の余白： / 外側の余白：

div {
  padding: 16px; /* 内側（内容と枠線の間） */
  margin: 24px;  /* 外側（枠線と隣の要素の間） */
}

▶ プレビュー

💡 padding は内側、margin は外側の余白です。margin: 〇〇px auto で要素を左右中央に配置できます。

💡 padding/margin の多値指定：
padding: 16px 24px と書くと上下16px・左右24pxになります。padding: 上右下左 の順で4つ書くこともできます。

影：

要素に影をつけてカードデザインに立体感を出せます。

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* X軸 Y軸 ぼかし 色（透明度付き） */
}

📐 box-shadow の値の意味:
box-shadow: 4px 8px 12px 0px rgba(0,0,0,0.2);

・4px = 右方向のずれ（マイナスで左）
・8px = 下方向のずれ（マイナスで上）
・12px = ぼかしの大きさ（大きいほどふんわり）
・0px = 広がり（通常は 0 でOK）
・rgba(0,0,0,0.2) = 影の色と透明度（0.2 = 薄い黒）

💻 やってみよう！

💡 このレッスンのCSSコードに .card というセレクタが登場します。「.（ドット）+ クラス名」で、HTMLの class="card" がついた要素にスタイルを当てられます。詳しくはlesson2の「クラスセレクタ」を確認してください。

VS Codeで my-practice フォルダの index.html と style.css を開き、以下のように書き換えてください。書き終えたら index.html をダブルクリックしてブラウザで確認しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>背景と枠線の練習</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="card">
      <h2>【名前】のプロフィール</h2>
      <p>趣味：ゲーム・読書</p>
      <p>好きな食べ物：ラーメン</p>
    </div>
  </body>
</html>

style.css

body {
  background-color: #f5f5f5;
}

.card {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 12px;
  padding: 24px;
  margin: 40px auto;
  width: 320px;
}

h2 {
  color: #3a86ff;
  margin: 0 0 12px 0;
}

p {
  color: #555555;
  margin: 4px 0;
}

▶ プレビュー

border-radius の値を変えて、角の丸さの違いを確認してみましょう！

自由課題:

box-shadow の値を変えて影の大きさを実験しよう
border-radius: 50% で丸いアイコンを作ってみよう
border を dashed や dotted に変えてみよう
border-bottom: 2px solid red で見出しに下線をつけてみよう
background: linear-gradient(to right, #667eea, #764ba2) を試してみよう

⚠️ よくあるミス

padding と margin を逆に覚える：padding は枠線の内側、margin は枠線の外側の余白です。「padding＝パッド（中に詰めるもの）」とイメージすると覚えやすいです。
border の書き順を間違える：border: 2px solid #ccc のように「太さ → 種類 → 色」の順で書きます。順番が違うとうまく表示されないことがあります。
色コードの # を忘れる：background-color: f0f4ff と書いても色が変わりません。#f0f4ff のように先頭に # を付けましょう。

📌 まとめ

プロパティ	役割	例
`background-color`	背景色	`background-color: #f0f4ff`
`background-image`	背景画像	`background-image: url("bg.jpg")`
`border`	枠線（太さ・種類・色）	`border: 2px solid #ccc`
`border-radius`	角丸	`border-radius: 8px`
`padding`	内側の余白	`padding: 16px`
`margin`	外側の余白	`margin: 24px auto`
`box-shadow`	影	`box-shadow: 0 2px 8px rgba(0,0,0,0.1)`

✅ padding は内側、margin は外側の余白
✅ margin: 〇〇px auto で要素を左右中央に配置できる
✅ border-bottom で下線だけつけられる
✅ linear-gradient でグラデーション背景が作れる

✨ box-shadow と gradient をブラウザでその場で試そう！

影や背景色のグラデーションをスライダーで動かしながらリアルタイムにプレビューできる無料ツールです。

box-shadow ジェネレーター → gradient ジェネレーター →

🚀 次のレッスンへ

次のレッスンでは、ボックスモデルをさらに深く理解してレイアウトを整える方法を学びます！

🔍 もっと調べてみよう：「CSS 背景枠線 border-radius」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！

✅ このレッスンが終わったら

ドリルで知識を確認してから次に進むと、理解が定着しやすいよ！

次のレッスン: ボックスモデル → 📝 このレッスンの問題を解く →

このレッスンは役に立ちましたか？

⚠️ よくあるエラー

スマホで表示が小さい — viewport meta タグがない

📝 関連ブログ記事

🏋️ 練習問題

このレッスンの練習問題に挑戦（Q11〜Q15）→

📋 チートシート

チートシートを見る →

← CSS コース一覧に戻る

次のレッスン: ボックスモデル →

🎯 このレッスンで学ぶこと

📖 導入 — カードデザインを作ってみよう

📝 背景・枠線・余白のプロパティ

背景色： / 背景画像：

枠線：

角丸：

個別の枠線： など

グラデーション：

内側の余白： / 外側の余白：

影：

💻 やってみよう！

⚠️ よくあるミス

📌 まとめ

🚀 次のレッスンへ

⚠️ よくあるエラー

📝 関連ブログ記事

🏋️ 練習問題

📋 チートシート

個別の枠線：など