Bootstrap5 カード（Card）の作成と簡単な使い方

カードは、コンテンツを見栄え良く表示するためのフレームワークです。画像、タイトル、テキスト、リンクなどを含む柔軟なコンテンツボックスを作成することができます

カードとは？

Bootstrap 5のカードは、コンテンツを視覚的に魅力的な方法で表示するための柔軟なフレームワークです。カードは、画像、タイトル、テキスト、リンクなどを含むコンテンツボックスを作成するのに適しています。カードは単独でも複数でも使用でき、さまざまなレイアウトやスタイルに対応しています。ウェブサイトやアプリケーションで情報を整理して表示するのに非常に便利なコンポーネントです。

基本的なカードの構造例

<div class="card" style="width: 18rem;">
  <img src="..." 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>

主な要素の説明

• <div class="card">: カード全体のコンテナ。
• <img src="..." class="card-img-top" alt="...">: カードの上部に表示される画像。
• <div class="card-body">: カードの本体部分。
• <h5 class="card-title">: カードのタイトル。
• <p class="card-text">: カードのテキスト内容。
• <a href="#" class="btn btn-primary">: カード内のリンクボタン。

カスタマイズオプション

Bootstrap 5のカードは、さまざまなカスタマイズオプションがあります。

画像

• <img src="..." class="card-img-top" alt="...">: カードの上部に画像を配置。
• <img src="..." class="card-img-bottom" alt="...">: カードの下部に画像を配置。
• <div class="card-img-overlay">: 画像の上にテキストオーバーレイを追加。

カードのレイアウト

カード内にリストグループを追加

<div class="card" style="width: 18rem;">
  <div class="card-header">
    特集
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">リストアイテム1</li>
    <li class="list-group-item">リストアイテム2</li>
    <li class="list-group-item">リストアイテム3</li>
  </ul>
</div>

カードにフッターを追加

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">ここにカードの内容を記述します。</p>
    <a href="#" class="btn btn-primary">詳細を見る</a>
  </div>
  <div class="card-footer text-muted">
    2日前
  </div>

カードを複数並べて表示

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">カードのタイトル1</h5>
      <p class="card-text">ここにカードの内容を記述します。</p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">カードのタイトル2</h5>
      <p class="card-text">ここにカードの内容を記述します。</p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">カードのタイトル3</h5>
      <p class="card-text">ここにカードの内容を記述します。</p>
    </div>
  </div>
</div>

まとめ

Bootstrap 5のカードを使用することで、コンテンツを視覚的に整理して表示することができます。カードはカスタマイズ性が高く、さまざまな要素（画像、テキスト、リンクなど）を組み合わせて使用できるため、プロジェクトのデザインに柔軟に対応します。また、レスポンシブデザインに対応しており、異なるデバイス上で美しく表示されます。

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 余白 【初心者の方向け】 Bootstrap4の使い方 ボーダー 【初心者の方向け】 Bootstrap4の使い方 ドロップダウン オリジナルサイト作成お得プラン