Bootstrap5 カード

 

 

Bootstrap5 カード

この記事では、Bootstrap5 のカードコンポーネントの機能、使用方法、およびカスタマイズオプションについて説明します。カードコンポーネントは、画像、テキスト、リンクなどのコンテンツを含むブロックを表示するために使用できます。

一、カード基礎

カードコンポーネントの基本構造は、以下のクラス名で構成されます。

  • .card: カードのコンテナ。
  • .card-body: カードのコンテンツを囲むコンテナ。
  • .card-img-top: カードの上部に画像を追加します。

コード例：


<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">カードタイトル</h5>
    <p class="card-text">カードの内容が表示されます。</p>
  </div>
</div>

二、カード内容

タイトルとテキスト

カードにタイトル、サブタイトル、テキストコンテンツを追加するには、次のクラス名を使用します。

  • .card-title: カードのタイトル。
  • .card-subtitle: カードのサブタイトル。
  • .card-text: カードのテキストコンテンツ。

画像

カードの上部または下部に画像を追加するには、次のクラス名を使用します。

  • .card-img-top: カードの上部に画像を追加します。
  • .card-img-bottom: カードの下部に画像を追加します。

リストグループ

カード内にリストグループコンポーネントを追加できます。

フッター

カードにフッターを追加するには、.card-footer クラス名を使用します。

三、カード画像

画像の重ね合わせ

画像の上にテキストやリンクを重ねるには、.card-img-overlay クラス名を使用します。

水平カード

画像が左側または右側にあるカードを作成するには、次のクラス名を使用します。

  • .card-img-left: 画像を左側に配置します。
  • .card-img-right: 画像を右側に配置します。

四、カードリンク

リンクカード

カード全体をリンクにするには、<a> タグを使用します。

ボタン

カード内にボタンコンポーネントを追加できます。

五、カードのカスタマイズ

色

カードのヘッダーとフッターの色をカスタマイズするには、次のクラス名を使用します。

  • .card-header-{color}: ヘッダーの色を指定します。
  • .card-footer-{color}: フッターの色を指定します。

ボーダー

カードのボーダーの色をカスタマイズするには、.border-{color} クラス名を使用します。

グリッド

グリッドシステムでカードコンポーネントを使用できます。

六、ケース

コード例：ブログ記事カード

以下は、Bootstrap 5 のカードコンポーネントを使用してブログ記事のリストを作成する例です。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>ブログ記事一覧</title>
  </head>
  <body>
    <div class="container mt-5">
      <div class="row">
        <div class="col-md-4 mb-4">
          <div class="card">
            <img src="https://via.placeholder.com/350x200" class="card-img-top" alt="記事画像1">
            <div class="card-body">
              <h5 class="card-title">魅力的なブログ記事タイトル１</h5>
              <p class="card-text">記事の要約文がここに表示されます。記事の内容に合わせて適宜変更してください。例えば、SEO対策に有効なキーワードなどを盛り込むと効果的です。</p>
              <a href="#" class="btn btn-primary">続きを読む</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card">
            <img src="https://via.placeholder.com/350x200" class="card-img-top" alt="記事画像2">
            <div class="card-body">
              <h5 class="card-title">読者の心を掴むブログ記事タイトル２</h5>
              <p class="card-text">記事の要約文がここに表示されます。読者の興味を引くような、簡潔で魅力的な文章を心がけましょう。</p>
              <a href="#" class="btn btn-primary">続きを読む</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card">
            <img src="https://via.placeholder.com/350x200" class="card-img-top" alt="記事画像3">
            <div class="card-body">
              <h5 class="card-title">思わずクリックしたくなるブログ記事タイトル３</h5>
              <p class="card-text">記事の要約文は、読者に記事の内容を正確に伝え、興味を持たせるための重要な要素です。</p>
              <a href="#" class="btn btn-primary">続きを読む</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

解説:

  • card クラスで囲まれた部分が1つの記事カードになります。

  • card-img-top クラスを適用した画像は、カードの上部に配置されます。

  • card-body クラスは、カードのコンテンツを囲むために使用します。

  • card-title クラスは、記事のタイトルに適用します。

  • card-text クラスは、記事の要約文に適用します。

  • btn btn-primary クラスを適用したリンクは、「続きを読む」ボタンになります。

コード例：商品カード

以下は、Bootstrap 5 のカードコンポーネントを使用して商品表示リストを作成する例です。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>商品一覧</title>
  </head>
  <body>
    <div class="container mt-5">
      <div class="row">
        <div class="col-md-4 mb-4">
          <div class="card">
            <img src="https://via.placeholder.com/350x200" class="card-img-top" alt="商品画像1">
            <div class="card-body">
              <h5 class="card-title">商品名１</h5>
              <p class="card-text">商品の簡単な説明文が入ります。魅力的な特徴をいくつか挙げると効果的です。</p>
              <p class="card-text"><small class="text-muted">価格: ¥1,980 (税込)</small></p>
              <a href="#" class="btn btn-primary">カートに入れる</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card">
            <img src="https://via.placeholder.com/350x200" class="card-img-top" alt="商品画像2">
            <div class="card-body">
              <h5 class="card-title">商品名２</h5>
              <p class="card-text">商品のメリットや利用シーンなどを具体的に記述することで、購買意欲を高めます。</p>
              <p class="card-text"><small class="text-muted">価格: ¥3,980 (税込)</small></p>
              <a href="#" class="btn btn-primary">カートに入れる</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card">
            <img src="https://via.placeholder.com/350x200" class="card-img-top" alt="商品画像3">
            <div class="card-body">
              <h5 class="card-title">商品名３</h5>
              <p class="card-text">簡潔ながらも分かりやすく商品の魅力を伝え、購入を検討したくなるような説明文を心がけましょう。</p>
              <p class="card-text"><small class="text-muted">価格: ¥5,980 (税込)</small></p>
              <a href="#" class="btn btn-primary">カートに入れる</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

解説:

  • card クラスで囲まれた部分が1つの商品カードになります。

  • card-img-top クラスを適用した画像は、カードの上部に配置されます。

  • card-body クラスは、カードのコンテンツを囲むために使用します。

  • card-title クラスは、商品の名前に適用します。

  • card-text クラスは、商品の説明文や価格に適用します。

  • btn btn-primary クラスを適用したリンクは、「カートに入れる」ボタンになります。

これらのコード例は、Bootstrap 5 のカードコンポーネントを使用して、ブログ記事や商品を表示する方法を示しています。それぞれの要素の内容を自分のウェブサイトに合わせて変更することで、簡単に実装できます。

七、まとめ

カードコンポーネントは、コンテンツを整理して表示するための柔軟で強力な方法です。

Q&A

Q1: カードコンポーネントの使い方は？

A1: カードコンポーネントを使用するには、.card クラスをコンテナ要素に追加し、.card-body クラスを使用してコンテンツを囲みます。

Q2: カードコンポーネントをカスタマイズするにはどうすればよいですか？

A2: カードコンポーネントは、Bootstrap のユーティリティクラスやカスタム CSS を使用してカスタマイズできます。

Q3: カードコンポーネントはどこで使用できますか？

A3: カードコンポーネントは、ブログ投稿、商品、ポートフォリオアイテムなど、さまざまなコンテンツを表示するために使用できます。