🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSSテンプレート：カード型レイアウト（角丸＋影付き）

📝 使用用途

このテンプレートは、商品カードやプロフィールカードなどの「囲みデザイン」を柔らかく見せたいときに便利です。初心者でもすぐに取り入れられます。

📘 解説

border-radiusで角を丸くし、box-shadowで影を付けることで、立体感と柔らかさを演出します。シンプルですが汎用性が高いスタイルです。

✅ デモ

これはカード型のボックスです。角が丸く、影が付いています。

📄 コード（部分）

<style>
.card {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  background-color: #ffffff;
  max-width: 400px;
  margin: 1rem auto;
}
</style>

<div class="card">
  これはカード型のボックスです。
</div>

📦 コード（HTML全体）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カード型レイアウトのデモ</title>
  <style>
    .card {
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      padding: 1.5rem;
      background-color: #ffffff;
      max-width: 400px;
      margin: 1rem auto;
    }
  </style>
</head>
<body>
  <div class="card">
    これはカード型のボックスです。角が丸く、影が付いています。
  </div>
</body>
</html>
コピーしました！
```html

🎨 カードデザインのバリエーション

基本のカードデザインをさらに発展させる方法をご紹介します。box-shadowの値を調整することで、より立体的な表現が可能です。例えばbox-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);とすると、より強い影の効果を得られます。

🌈 色とホバー効果

カードに色を付けたい場合は、background-colorを変更します。また、.card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }と記述すると、マウスオーバー時に浮き上がる効果を追加できます。

📱 レスポンシブ対応

カードの幅を画面サイズに応じて調整するには、max-widthの代わりにwidth: 90%;を使用します。メディアクエリと組み合わせて@media (min-width: 768px) { .card { width: 50%; } }のように指定すると、デスクトップでは2列レイアウトにすることも可能です。

カード内のコンテンツ配置も重要です。display: flex;やflex-direction: column;を追加すると、内部要素の配置を柔軟に制御できます。特にボタンや画像を含むカードレイアウトでは有効です。

このカードデザインは、商品一覧、ブログ記事のサムネイル、ダッシュボードのウィジェットなど、様々な場面で活用できます。影と角丸のバランスを調整することで、サイト全体のトーン＆マナーに合わせたデザインを作成しましょう。

```

関連テンプレート