【第13回】簡単な実践（カードUIを作ってみよう）｜CSS初心者ノート

---

🎨 カードUIとは？

カードUI（Card Design）は、
「情報をひとかたまりの箱で見せる」デザインのことです。

• ブログの「おすすめ記事」
• 商品リスト
• プロフィール欄

など、いろんなところに出てくるデザインですね。

💡 ポイントは「背景色・余白・枠線・角丸」を組み合わせること！

---

📦 STEP1：これだけでOK！一番シンプルなカード

まずは一番シンプルな形を作ってみましょう。
画像もボタンもなしで、「箱＋タイトル＋テキスト」だけのカードです。

HTML部分：

<div class="card">
  <h3>タイトルが入ります</h3>
  <p>カードUIは、情報をひとまとめにして見やすくするのに便利です。</p>
</div>

CSS部分：

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

👉 これだけで「薄い水色の背景＋枠線＋内側の余白＋角丸」の
シンプルなカードが完成します✨

💡ここまででひとまず完成と思って大丈夫です。
この形だけでも、ブログの中で十分使えます。

---

🧱 STEP2：余裕があれば少しだけ見た目を整える

「もうちょっとだけ整えたいな〜」というときのおまけステップです。
カードの幅と文字まわりを少し整えて、見た目をきれいにしてみましょう。

追加するCSS：

.card {
  width: 320px;              /* カードの横幅 */
  margin: 20px auto;         /* 上下に余白＋中央寄せ */
}

.card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.card p {
  line-height: 1.6;
  color: #555;
}

👉 変更ポイント

• width と margin: 0 auto; で、カードが中央に配置される
• タイトルの下に少し余白ができて読みやすくなる
• 本文の行間を 1.6 にして、ぎゅうぎゅう感をなくす

💡ここも余裕があればでOKです。
コードを見て「なんか難しい…」と思ったら、STEP1だけ使いましょう😊

---

💻 実際のコード例まとめ

STEP1とSTEP2をまとめた形です。
（わからなければ、まずは .card { ... } の部分だけ使ってみてください）

<div class="card">
  <h3>タイトルが入ります</h3>
  <p>カードUIは、情報をひとまとめにして見やすくするのに便利です。</p>
</div>

.card {
  background-color: #f9fbff;
  border: 1px solid #c9d7ff;
  padding: 16px;
  border-radius: 8px;
  width: 320px;         /* 余裕があれば追加 */
  margin: 20px auto;    /* 余裕があれば追加 */
}

.card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.card p {
  line-height: 1.6;
  color: #555;
}

---

👀 実際の表示結果

• 薄い水色のカードが画面中央に表示される
• 上にタイトル、その下に説明文が、
  行間ゆったりめで読みやすく並びます📦

（※STEP1の時点でも、カード自体はちゃんと完成しています）

---

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

• padding を入れ忘れると、文字が枠ギリギリについて読みにくくなる
• border-radius を大きくしすぎると、丸すぎて違和感が出ることも
• width を指定しないと、スマホ画面いっぱいに広がってしまうことがある

---

✅ ポイントまとめ

📦 カードUIは「箱＋余白＋枠線＋角丸」で作れる
🎨 まずは STEP1 の最小コードだけでOK
🧱 余裕が出てきたら、幅や行間、色を少しずつ整えていけば十分

「全部いきなり覚えよう」としなくて大丈夫です。
まずは1つのカードを、自分の手で写経→表示してみることが大事です✨

---

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

---

📌 次回予告

【第14回】CSSでアニメーションを作ってみよう
→ transition と @keyframes を使って、動きのあるデザインに挑戦します🎞️

---

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

#background-color #border #border-radius #padding #width #margin #line-height

---