Zenn
🙆‍♀️

【Bootstrap】コンポーネント-囲む系-

2025/02/11に公開
Bootstrap
tech

🔹 カード（Card）

カードは、コンテンツを囲むデザインとしてよく使われます。

📌 シンプルなカード 

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="画像">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">ここに説明文を入れます。</p>
    <a href="#" class="btn btn-primary">詳細を見る</a>
  </div>
</div>

✅ card クラスを使用して枠を作成
✅ card-img-top で画像を表示
✅ card-body で本文を囲む

📌 カードの複数レイアウト 

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">カード1</h5>
        <p class="card-text">簡単な説明</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">カード2</h5>
        <p class="card-text">簡単な説明</p>
      </div>
    </div>
  </div>
</div>

✅ row + col-md-* を使ってグリッド配置
✅ 自動的にレスポンシブ対応

🔹 Jumbotron| 大きなコンテンツエリア |

大きな見出しと背景を持つコンテンツエリア。写真は管理者モード

<div class="p-5 mb-4 bg-light rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-5 fw-bold">ジャンボトロン風デザイン</h1>
    <p class="col-md-8 fs-4">大きなタイトルや重要なコンテンツに最適です。</p>
    <button class="btn btn-primary btn-lg">もっと見る</button>
  </div>
</div>

✅ bg-light で背景色追加
✅ rounded-3 で角を丸くする
✅ p-5 でパディング調整

🔹 ボーダー| シンプルな枠線 |

Bootstrapには枠線を適用するクラスもあります。

<div class="border border-primary p-3">青の枠線</div>
<div class="border border-danger p-3 mt-2">赤の枠線</div>
<div class="border border-success rounded p-3 mt-2">緑の角丸枠</div>

✅ border-primary（青枠）
✅ border-danger（赤枠）
✅ border-success（緑枠）
✅ rounded で角丸を適用

🔹 パネル風（コンテナ+枠）

シンプルな枠付きコンテンツを作る場合は、card 以外にも border を活用できます。

<div class="container p-3 border rounded shadow">
  <h5>枠付きのコンテナ</h5>
  <p>これはシンプルな枠のあるコンテンツエリアです。</p>
</div>

✅ container で中央寄せ
✅ border で枠を追加
✅ rounded で角丸
✅ shadow で影をつける

🔹 ボーダー付きボタン

ボタンに枠線を追加したデザイン。

<button class="btn btn-outline-primary">枠付きボタン</button>
<button class="btn btn-outline-danger">警告ボタン</button>

✅ btn-outline-* でボーダー付きのボタン

🔹 シャドウ（影）

ボックスに影をつけるとより立体的に。

<div class="p-3 mb-4 border shadow-sm">影が薄いボックス</div>
<div class="p-3 mb-4 border shadow">影が中くらいのボックス</div>
<div class="p-3 mb-4 border shadow-lg">影が濃いボックス</div>

✅ shadow-sm（薄い影）
✅ shadow（普通の影）
✅ shadow-lg（濃い影）

Discussion