Bootstrapを使用したレスポンシブなカードの作り方

1. Bootstrapの導入: まず、HTMLファイルのセクション内で、BootstrapのCSSとJavaScriptのリンクを追加します。以下のコードを使用して、Bootstrapを導入します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

2. カードの基本的な構造: カードを作成するためには、以下のような基本的な構造を持つ
   要素を使用します。

<div class="card">
  <img src="card-image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Card content goes here.</p>
  </div>
</div>

3. 必要なクラスの追加: カードにレスポンシブなデザインを適用するために、Bootstrapのクラスを使用します。

• .cardクラス: カード要素を定義します。
• .card-img-topクラス: カードの上部に表示される画像を定義します。
• .card-bodyクラス: カードのコンテンツを含む要素を定義します。
• .card-textクラス: カードのテキストコンテンツを定義します。

4. レスポンシブなデザインの適用: Bootstrapでは、カードをレスポンシブにするためのクラスが用意されています。

• .cardクラスに.w-75や.w-50などの幅を指定するクラスを追加することで、カードの幅を調整できます。
• .cardクラスに.mx-autoクラスを追加することで、カードを中央に配置することができます。

以下のコードは、幅が75%で中央に配置されるレスポンシブなカードの例です。

<div class="card w-75 mx-auto">
  <img src="card-image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Card content goes here.</p>
  </div>
</div>