【第8回】枠線をデザインしてみよう｜border / border-radiusで角丸ボックスを作る【CSS初心者ノート】

🧱 枠線デザインの基本（border の復習）

border は「太さ・線の種類・色」をセットで指定します。

.box {
  border: 2px solid #333;   /* 太さ / 種類 / 色 */
}

主な種類（style）👇

値	意味
solid	実線
dotted	点線
dashed	破線

💡 辺ごとに指定することもできます：border-top, border-right, border-bottom, border-left

---

⭕ 角丸デザインを作ろう（border-radius）

角を丸めるのが border-radius。値は px や % が使えます。

.round {
  border: 2px solid #888;
  border-radius: 8px;   /* 角を少し丸く */
}

.pill {
  border: 2px solid #888;
  border-radius: 9999px; /* ピル型（角を最大に） */
}

.circle {
  width: 120px; height: 120px;
  border: 2px solid #888;
  border-radius: 50%;    /* 正方形＋50%で円に */
}

💡 % は要素サイズに対する割合。正方形＋50%で “まん丸” になります。

---

📦 カード風ボックスを作る（背景色＋枠線＋角丸）

背景色と組み合わせると“カード”っぽく仕上がります。

.card {
  background-color: #f9fbff;
  border: 1px solid #c9d7ff;
  border-radius: 12px;
  padding: 20px;
}

💡 背景が淡い色 × 枠線は少し濃い色にすると、読みやすいコントラストになります。

---

📑 見出しに線を引く（border-bottom / border-left）

要素の一辺だけに線を引くと、見出しがスッと締まります。

h2.under {
  border-bottom: 3px solid #555;
  padding-bottom: 6px;
}

h3.side {
  border-left: 6px solid #7aa6ff;
  padding-left: 10px;
}

💡 「線の太さ＝情報の強さ」。h2 は太め、h3 はやや細め、がバランス良し。

---

💻 実際のコード例

HTML部分：

<div class="card">
  <h2 class="under">お知らせ</h2>
  <p>枠線と角丸を使うと、ボックスが見やすく整います。</p>
  <a class="pillbtn" href="#">詳しく見る</a>
</div>

CSS部分：

.card {
  background-color: #f9fbff;
  border: 1px solid #c9d7ff;
  border-radius: 12px;
  padding: 20px;
}

h2.under {
  border-bottom: 3px solid #555;
  padding-bottom: 6px;
}

.pillbtn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid #7aa6ff;
  border-radius: 9999px;   /* ピル型ボタン */
  text-decoration: none;
}

---

👀 実際の表示結果

淡い背景のカードに、下線付きの見出し。
ボタンは角が丸い“ピル型”になり、全体がやさしい印象で表示されます。

---

⚠️ よくあるミスと注意点

• border-radius: 50% は正方形で使う（長方形だと楕円になります）
• 線が太すぎる／色が濃すぎると文字が弱く見える → まずは 1–2px・中間色 から
• 角丸＋背景なしだと効果が見えにくい → 背景色 or 画像の上で使うと効果的

---

✅ ポイントまとめ

• 枠線の基本は 太さ・種類・色 の3点セット
• border-radius で 角丸・ピル型・円 を作れる
• 背景色＋枠線＋角丸 で“カード風”が簡単に作れる

---

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

---

📌 次回予告

【第9回】幅・高さ・中央配置
→ width / height / margin: auto を使って、ボックスのサイズを調整し、中央に配置してみます📏

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

#border #border-radius #border-color #border-width #border-style

💡 枠線の太さ・色・角丸を組み合わせて、見やすくおしゃれなデザインに。