🚀 プログラミング学習

レッスン3：背景と枠線

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

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

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

背景色：background-color / 背景画像：background-image

div {
  background-color: #f0f4ff;
}

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

枠線：border

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

div {
  border: 2px solid #cccccc;
}
種類の値見た目
solid実線
dashed破線
dotted点線

角丸：border-radius

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

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

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

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

💻 やってみよう！

<!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>
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 の値を変えて、角の丸さの違いを確認してみましょう！

📌 まとめ

プロパティ役割例
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

🚀 次のレッスンへ

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

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