Bootstrap Card Component: 完全な紹介

Bootstrapカードは、Webプロジェクトでコンテンツを整理して表示するための重要なツールです。シンプルで汎用性のあるレイアウトを作成し、異なるデバイスにシームレスに適応させる方法を提供します。この記事の最後まで読むと、Bootstrapカードコンポーネントを効果的に使用する方法がわかります。

Bootstrapを選ぶ理由

Bootstrapは、レスポンシブでモバイルファーストなWebレイアウトを構築するための最も人気のあるフレームワークの1つです。その主な利点は次のとおりです：

迅速かつ簡単なレスポンシブデザイン：見栄えの良いレイアウトを作成するには、基本的なHTMLとCSSの知識だけが必要です。
モバイルファーストのアプローチ：Bootstrapは、モバイルへの対応を最優先に考えています。
ブラウザの互換性：すべての主要なブラウザで完璧に動作します。
Flexboxベースのグリッドシステム：配置や間隔のタスクを簡素化します。
豊富なコンポーネント：ボタン、モーダル、カードなど、再利用可能な要素が幅広く揃っています。

Bootstrapの最新バージョンでは、Flexboxのサポートや汎用性の高いカードコンポーネントなど、重要な改善が導入されています。これにより、パネルやサムネイルなどの古いコンポーネントが置き換えられます。

要点

Bootstrapのカードは整理されたレスポンシブレイアウトを作成するための汎用ツールです。これを使用すると、テキスト、画像、マルチメディアなどさまざまな種類のコンテンツをスタイリッシュなコンテナ内に表示できます。以下は、開発者にとって不可欠な要素であるいくつかの主な機能です:

使用の容易さ: div class=”card-body”などの要素を組み合わせることで、簡単にカードを作成できます。これによりコンテンツエリアを定義することができ、p class=”card-text”ではテキスト情報を配置できます。
複数のコンテンツタイプのサポート: カードタイトル、画像、またはリストグループを追加して、コンテンツを効果的に構造化できます。
レスポンシブ対応: Bootstrapのグリッドとブレークポイントを使用すると、カードはモバイルからデスクトップまで、あらゆるデバイスサイズに適応できます。
カスタマイズ可能なデザイン: カラー、境界線、テキストの配置など、外観を調整できるユーティリティクラスが用意されています。
高度なレイアウト: カードグループ、デッキ、マンソリーレイアウトなどの機能により、シームレスな配置と整理が可能です。

Bootstrapカードコンポーネントとは何ですか?

Bootstrapは、さまざまな種類のコンテンツを表示するための柔軟でスタイリッシュなコンテナとして機能する、汎用的でモダンなUIコンポーネントであるカードを紹介しています。デフォルトのスタイリングが最小限であるため、Bootstrapカードは幅広いユーティリティクラスを使用して簡単に強化できます。

このコンポーネントはFlexboxをベースに構築されており、正確な配置とスペーシングが可能です。開発者はBootstrapのスペーシングユーティリティを使用して、余白とパディングを効果的に制御できます。

カードは、タイトル、サブタイトル、本文、画像などさまざまなタイプのコンテンツを便利に収容でき、オプションのヘッダーやフッターセクションも含めることができます。使用目的に応じて異なるタイプのカードを構築するために、異なるセクション（カードブロック）を含めることもできます。

主要なBootstrapカードクラス

以下に、主要なBootstrapカードユーティリティクラスとその目的が示されています：

card: カードコンポーネントを定義するメインコンテナクラス。
card-body: カード内部の主要なコンテンツ領域を作成します。
card-title: カードのタイトルをスタイル付けし、通常は<h5>などの見出しタグと一緒に使用されます。
card-text: カード内の標準的なテキストコンテンツに使用されます。
card-header: カードの上部にスタイル付きのヘッダーセクションを追加します。
card-footer: カードの下部にスタイル付きのフッターセクションを追加します。
card-img-top: カードの上部に画像を配置します。
card-img-bottom: カードの下部に画像を配置します。
list-group: カード内にリストグループを作成します。
list-group-item: リストグループ内の個々のアイテムにスタイルを適用します。
card-group: 幅と高さが等しい複数のカードをグループ化します。
card-deck: スペースを空けて複数のカードを整列しますが、Bootstrap 5 で非推奨になりました。
text-*: テキストの色をスタイリングするためのユーティリティクラス（例：text-primary、text-success）。
bg-*: 背景色をスタイリングするためのユーティリティクラス（例：bg-light、bg-dark）。

この簡潔な概要は、Bootstrapカードを構築およびカスタマイズするために使用される基本的なクラスをリストします。

プロジェクトにBootstrapを含める方法

Bootstrapをプロジェクトに簡単に含めるには、コンテンツデリバリーネットワーク（CDN）から含めるか、getbootstrap.comから必要なファイルをダウンロードします。

この例では、Bootstrapカードコンポーネントを含むためにCDNを使用したシンプルなHTMLページを設定する方法を示します。この方法を使えば、追加の設定をすることなく素早くカードを作成してスタイリングすることができます。

次の手順に従って、index.htmlファイルを作成し、Bootstrap 5.3.3を含めます：

<!doctype html>
<html lang="en">
<head>
    <!-- 必須のメタタグ -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Bootstrap Card Example</title>
</head>
<body>
    <div class="container mt-5">
        <div class="card" style="width: 18rem;">
            <div class="card-header bg-primary text-white">
                Example Card Header
            </div>
            <div class="card-body">
                <h5 class="card-title">Example Card Title</h5>
                <p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
                    header, title, and text.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>

    <!-- Popper付きのBootstrap Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

CDN経由でBootstrapファイルを含め、常に最新のフレームワークバージョンを利用できるようにしています。コンテンツのベースとなるコンテナディビジョンが追加され、Bootstrapカードコンポーネントの構築をすぐに開始できます。

詳細については、スターターテンプレートのドキュメントをご覧ください。

基本的なBootstrapカードの作成

シンプルなカードを作成するには、次の手順に従ってください：

.cardクラスを使用して外側のコンテナを作成するために<div>タグを使用します。
.card-body クラスを内部の<div>タグに追加して、カードの本文を定義します。
.card-titleおよび.card-subtitleクラスを見出しタグ（<h5>および<h6>）と一緒に使用して、カードのタイトルとサブタイトルを追加します。
.card-textクラスを<p>タグと一緒に使用して、テキストコンテンツを追加します。
.card-img-topクラスを<img>タグと一緒に使用して、カードの上部に画像を追加します。

これらは基本的なカードレイアウトの基本的な構成要素です。以下に例を示します：

<div class="card" style="width: 30rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
   <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
      <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

このコードは、画像、タイトル、サブタイトル、テキスト、およびボタンを持つカードを生成し、style=”width: 30rem;”プロパティを使用して親コンテナの幅に合わせて調整されます。

これは結果のスクリーンショットです。

Bootstrapでの水平カード

水平カードを使用すると、コンテンツを横並びのレイアウトで表示でき、コンパクトで整然としたデザインに最適です。レスポンシブな動作を実現するために、グリッドクラスを使用して作成し、カードがすべてのデバイスで素晴らしく見えるようにします。

<div class="card mb-3" style="max-width: 540px;">
   <div class="row g-0">
      <div class="col-md-4">
         <img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
      </div>
      <div class="col-md-8">
         <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">This is a card with text beside an image, perfect for showcasing content
               side-by-side.
            </p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
         </div>
      </div>
   </div>
</div>

これはその結果のスクリーンショットです：

Bootstrapカード内のリストグループ

Bootstrapを使用すると、リストグループを含めることでカードを強化し、構造化された整然としたコンテンツを簡単に表示できます。 list-group と list-group-flush クラスは、カード内でシームレスに統合され、開発者が視覚的に魅力的なリストを作成できます。

以下は、フラッシュリストグループを含むカードの作成方法です：

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

カードの機能の強化

ヘッダーとフッターの追加

.card-header および .card-footer クラスを使用して、ヘッダーやフッターを含めることでカードを強化できます。以下は例です：

<div class="row">
    <div class="col-sm-3">
        <div class="card">
            <div class="card-header">
                This is a header
            </div>
            <img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <h4 class="card-subtitle">Card subtitle</h4>
                <p class="card-text">This is a simple Card example</p>
            </div>
            <div class="card-footer">
                    This is a footer
            </div>
        </div>
    </div>
</div>

これは結果のスクリーンショットです：

このレイアウトにより、スタイルされたヘッダーとフッターを備えたカードにより、より多くのコンテキストが追加されます。

画像上にテキストをオーバーレイする

画像の上にコンテンツをオーバーレイするには、.card-img-overlay を使用します。 card-body クラスを card-img-overlay クラスに簡単に切り替えることで、画像をオーバーレイとして使用できます：

<div class="card" style="width: 30rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
   <div class="card-img-overlay">
      <h5 class="card-title">Card Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
      <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

これはその結果のスクリーンショットです：

カードイメージのキャプションの追加

カードの上部または下部に画像を追加するには、.card-img-topまたは.card-img-bottomを使用します。

<div class="card" style="width: 18rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
   <div class="card-body">
      <p class="card-text">This card has an image cap at both the top and bottom.</p>
   </div>
   <img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>

これは結果のスクリーンショットです：

カードの上部と下部の画像はイメージキャップと呼ばれます。

Bootstrapカードによるレスポンシブデザイン

レスポンシブデザインにより、すべてのデバイスでカードが美しく表示されます。レイアウトを制御するためにBootstrapのグリッドシステムを使用してください。

例コード

<div class="row row-cols-1 row-cols-md-3 g-4">
   <div class="col">
      <div class="card">
         <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
         <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
            <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
         </div>
      </div>
   </div>
   <div class="col">
      <div class="card">
         <img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
         <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
            <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
         </div>
      </div>
   </div>
</div>

これは結果のスクリーンショットです：

Bootstrapカードの高さと幅の調整

カードの特定の幅を設定するには、スタイル属性またはBootstrapのユーティリティクラスを使用できます。以下はその例です：

<div class="card" style="width: 10rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
   <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">This is a simple card example with a custom width.</p>
   </div>
</div>

これは結果のスクリーンショットです：

このカードの幅は10remに制限されており、デザインのニーズに基づいて調整できます。

通常、カードの高さはカードの内容に垂直にフィットするように調整されますが、カスタムCSS（例えば、style=”height: 10rem;”）やBootstrapのサイズユーティリティ（例えば、<div class=”card h-200″>）を使用して制御することもできます。

最新のBootstrapリリースでは、rem単位を使用するように切り替えられました。これはpx単位よりもスケーラブルな計測単位であり、ユーザー設定との親和性が高く、テキストがよりアクセスしやすくなります。その結果、ページ内のすべての要素が画面サイズに合わせてスケーリングされます。

Bootstrapの新機能について詳しくは、SitePointの「Bootstrap: Super Smart Features to Win You Over」の記事をご覧ください。

幅の制御にグリッドシステムを使用する

Bootstrapカードコンポーネントの幅を制御する別のオプションは、Bootstrapグリッド（行と列）を使用することです。

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
            <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">This is an example card using the grid system.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
            <div class="card-body">
                <h5 class="card-title">Another Card</h5>
                <p class="card-text">This card sits next to the first one.</p>
            </div>
           </div>
    </div>
</div>

以下はその結果のスクリーンショットです：

この例では、2つのカードが並んで表示され、それぞれが中サイズ以上の画面で4つの列（col-md-4）を占めています。

カードスタイル

Bootstrapでは、背景色、境界線、テキストスタイルなど、カードをカスタマイズするためのさまざまなオプションが提供されています。

背景色とテキスト色

ユーティリティクラス（.bg-primaryや.text-whiteなど）を使用して、カードの背景色やテキスト色を変更できます。

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body">
    <h5 class="card-title">Primary Card Title</h5>
    <p class="card-text">Quick text to demonstrate card styling.</p>
  </div>
</div>

境界線の色

カードの境界線の色をカスタマイズするために.border-{color}クラスを使用します。カード内のテキストも.text-{color}でスタイルを指定できます。

<div class="card border-success mb-3" style="max-width: 18rem;">
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body text-success">
    <h5 class="card-title">Success Card Title</h5>
    <p class="card-text">Simple content styled with a border.</p>
  </div>
</div>

透明なヘッダーとフッター

ヘッダーやフッターから背景色を取り除くには、.bg-transparentを使用し、境界線をカスタマイズします。

<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-info">Header</div>
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body text-info">
    <h5 class="card-title">Info Card Title</h5>
    <p class="card-text">Example content inside a card.</p>
  </div>
  <div class="card-footer bg-transparent border-info">Footer</div>
</div>

背景と境界線の組み合わせ

ユニークなスタイリングのために背景と境界線のユーティリティを組み合わせます。

<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body text-dark">
    <h5 class="card-title">Mixed Style Card</h5>
    <p class="card-text">Custom card combining background and border.</p>
  </div>
</div>

1行に4つの異なるカードスタイルを示す結果を次に示します。

Bootstrapを使用すると、異なるヘッダースタイルのカードを作成できます。

メインセクション用の「header primary card title」
微妙なデザイン用の「header light card title」
サポートテキスト付きのカード用の「header secondary card title」
大胆な外観用の「header dark card title」
肯定的なメッセージ用の「header success card title」
警告用の「header danger card title」

これらの多目的なカードスタイルオプションを使用して、「header warning card title」、「header info card title」などの一意のデザインを作成し、重要な情報を強調したり、特定の詳細に注意を引いたりすることができます。

ナビゲーションの追加

Bootstrapのカードコンポーネントのもう1つの便利な機能は、タブやナビゲーションピルなどの高度なナビゲーションパターンをヘッダーセクションに追加できる可能性です。

カードヘッダーにタブを追加します。

カードのヘッダーにタブを含めるには、順序なしリスト（<ul>）に.nav-tabsおよび.card-header-tabsクラスを使用します。以下は例です:

<div class="card" style="width: 30rem;">
   <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs">
         <li class="nav-item">
            <a class="nav-link active" href="#">Tab 1</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Tab 2</a>
         </li>
      </ul>
   </div>
   <div class="card-body">
      <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
      <h5 class="card-title pt-3">Card with Tabs</h5>
      <p class="card-text">This card includes a tabbed navigation element in its header.</p>
   </div>
</div>

これは結果のスクリーンショットです:

カードヘッダーにピルを追加する

同様に、.nav-tabsを.nav-pillsに、.card-header-tabsを.card-header-pillに置き換えることで、ナビゲーションピルを追加できます。<ul>リストタグに:

<div class="card" style="width: 30rem;">
   <div class="card-header">
      <ul class="nav nav-pills card-header-pill">
         <li class="nav-item">
            <a class="nav-link active" href="#">Tab 1</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Tab 2</a>
         </li>
      </ul>
   </div>
   <div class="card-body">
      <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
      <h5 class="card-title pt-3">Card with Tabs</h5>
      <p class="card-text">This card includes a pill-style navigation element in its header.</p>
   </div>
</div>

これは結果のスクリーンショットです:

これについての詳細情報は、Bootstrapナビゲーションコンポーネントのドキュメントで確認できます。

Bootstrapカードコンポーネントへのリンクの追加

カード内にリンクを素早く追加するには、.card-link クラスを使用した<a>タグを使用できます:

<div class="card">
<div class="card-body">
  <h3 class="card-title">Adding Links</h3>
  <p class="card-text">These are simple links</p>
  <a href="#" class="card-link">Link 1</a>
  <a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
      This is a footer
</div>
</div>

これは結果のスクリーンショットです:

Bootstrapカードコンポーネント内のテキストの配置と変形

Bootstrapは、カードコンポーネント内のテキストを配置および変形させるためのテキストユーティリティクラスを提供しています。テキストの配置には、以下のクラスを使用できます:

.text-start：カードテキストを左揃え
.text-end：カードテキストを右揃え
.text-center：カードテキストを中央揃え
.text-justify：カードテキストを両端揃え（古いバージョンに適用、Bootstrap 5 で非推奨）
.text-nowrapを使用してテキストを折り返し防止

以下のクラスを使用してテキストを変換することもできます:

.text-lowercaseはテキストを小文字に変換
.text-uppercaseはテキストを大文字に変換
.text-capitalizeは各単語の最初の文字を大文字に変換

Bootstrapカードコンポーネントの背景、前景、および境界線の色をカスタマイズ

テキストおよび背景ユーティリティクラスを使用して、Bootstrapカードの背景、テキスト、および境界線の色をカスタマイズすることができます。以下にいくつかの例を示します:

テキストの色: テキストの色を変更するには、.text-primary、.text-success、.text-danger、.text-warning、.text-info、.text-light、.text-dark、または.text-whiteを使用します。
背景色: 背景色を変更するには、.bg-primary、.bg-success、.bg-danger、.bg-warning、.bg-info、.bg-light、.bg-dark、または.bg-whiteを使用します。
境界線の色: 境界線の色をスタイルするには、.border-primary、.border-success、.border-danger、.border-warning、.border-info、.border-light、.border-dark、または.border-whiteを使用します。

以下のCodePenデモでは、Bootstrapで作成できるさまざまな種類のカードがすべて表示されています。お気軽に自分で試してみてください:

Bootstrapカードコンポーネントを使用した高度なレイアウトの作成

Bootstrapカードは、モダンなWebレイアウトで広く使用されている汎用のUIコンポーネントであり、テキストや画像などのさまざまなコンテンツタイプを単一のエンティティまたはグループ化されたコレクションとして表示します。

カードはレスポンシブデザインに特に便利で、Masonryレイアウト、別名ピンタレスト風レイアウトのようなレイアウトで一般的に実装されています。

カードは、画像ギャラリー、ブログ投稿、またはeコマース製品のレイアウトを作成するために使用できます。GoogleやFacebookのような主要なプラットフォームは、ウェブアプリケーションでコンテンツを整理し表示するためにカードを広範囲に活用しています。

以前は、このような高度なレイアウトを構築するにはCSSとHTMLの深い知識が必要でした。しかし、Bootstrapの最新機能を利用すれば、開発者は簡単にレスポンシブで視覚的に魅力的なカードベースのレイアウトを作成できます。

.card-group、.card-deck、.card-columnsのようなクラスは、カードを一貫したスタイリングと整列で整理するプロセスを簡素化します。

カードのグループ化/ネスティング

カードグループは、Bootstrapで複数のカードコンポーネントを均一な幅と高さの単一の付属エンティティとして表示する効率的な方法です。

このレイアウトは、display: flex;プロパティを使用して実現され、すべてのカードが完璧に整列します。これは、レスポンシブデザインや一貫したカードの寸法が重要な現代的なウェブレイアウトに特に便利です。

カードのグループを作成するには、個々のカードを含むラッパーdivとして.card-groupクラスを使用します。

こちらは、3つのカードのグループを示す例です：

<div class="card-group">
  <div class="card text-white">
      <img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
      <div class="card-img-overlay">
   <div class="card-group">
   <div class="card text-white">
      <img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
      <div class="card-img-overlay">
         <h3 class="card-title">Card Title 1</h3>
         <h4 class="card-subtitle">Card Subtitle</h4>
         <p class="card-text">This is an example of a grouped card.</p>
      </div>
   </div>
   <div class="card text-white">
      <img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
      <div class="card-img-overlay">
         <h3 class="card-title">Card Title 2</h3>
         <h4 class="card-subtitle">Card Subtitle</h4>
         <p class="card-text">Grouped cards ensure uniform styling.</p>
      </div>
   </div>
   <div class="card text-white">
      <img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
      <div class="card-img-overlay">
         <h3 class="card-title">Card Title 3</h3>
         <h4 class="card-subtitle">Card Subtitle</h4>
         <p class="card-text">They are responsive and visually appealing.</p>
      </div>
   </div>
</div>

これは結果のスクリーンショットです：

見ると、3枚のカードが取り付けられ、同じ幅と高さを持っています。

カードデッキ

以前のBootstrapのバージョンでは、カードに同じ幅と高さを持たせるが互いには取り付けられないカードレイアウトを作成するために、.card-deckが使用されていました。しかし、Bootstrap 5では、この目的にはグリッドシステムが推奨されています。このアプローチはより大きな柔軟性とレスポンシブ性を提供します。

同様のレイアウトを実現するには、.rowクラスを使用して.cardの間隔と配置を制御するために.colを使用します。以下に例を示します。

<div class="row row-cols-1 row-cols-md-3 g-4">

見ると、カードは同じサイズであり、それらの間には少しの余白があります。

カード列

以前のBootstrapのバージョンでは、.card-columnsクラスが使用され、カードが上から下に、左から右に追加されるMasonry風のレイアウトを作成するために使用されていました。しかし、Bootstrap 5では、この機能は削除されました。

同様のレイアウトを実現するには、グリッドシステムを使用してCSS MasonryレイアウトやMasonry.jsなどのJavaScriptプラグインと組み合わせることができます。より複雑な動作にはMasonry.jsなどのJavaScriptプラグインが適しています。

グリッドシステムとCSSを使用してシンプルなMasonryスタイルのレイアウトを作成する方法は以下の通りです。

パフォーマンスの最適化

効率的なパフォーマンスは、迅速に読み込み、シームレスに適応するBootstrapカードを作成するために不可欠です。div class card bodyやh5 class card titleなどのBootstrapカードコンポーネントを統合する際にパフォーマンスを向上させるための実用的なテクニックをご紹介します。

画像の遅延読み込み

Lazy loadingは、画像がビューポート内に表示されるまで読み込みを遅延させ、ページ速度を最適化します。効率的なソリューションとして、loading=”lazy”属性をcard img topに使用してください。

<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">

画像サイズの最適化

画像をコンテナの寸法に合わせてリサイズし、読み込み時間を短縮します。divクラスcard imgにimg-fluidを使用して、画像を自動的にスケーリングしてください。

<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">

これにより、card img topが親要素の幅に関係なく完璧にフィットすることが保証されます。

CSSとJavaScriptの最小化

スタイルとスクリプトを最小化してファイルサイズを削減します。複数のdivクラスcard header要素を組み合わせ、カスタムCSSを最小限に抑えてレンダリングを高速化してください。

最適化された例

このような繰り返しやカスタムスタイルを適用する代わりに、

<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
   <div class="card-body">
      <h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
      <p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
   </div>
</div>

よりクリーンでメンテナンスしやすい構造のためにBootstrapのユーティリティクラスを使用してください：

<div class="card border-primary text-center p-3">
   <div class="card-body">
      <h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
      <p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
   </div>
</div>

アイコン用にSVGを使用

SVGは軽量でスケーラブルであり、cardヘッダーや装飾要素に最適です。デバイス間で鮮明さを保ちつつ高速に読み込まれます。

例

<div class="card text-center">
   <div class="card-header bg-success text-white">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
         <path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
      </svg>
      <h5 class="card-title">SVG Optimized Header</h5>
   </div>
   <div class="card-body">
      <p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
   </div>
</div>

リソースのプリロードとプリフェッチ

重要なリソースを読み込むためにrel=”preload”を使用し、将来のニーズを予測するためにrel=”prefetch”を使用してください。特に重いカードコンテンツには特に便利です。

例

<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">

DOMの複雑さを削減

レンダリングを遅くする可能性がある過度に入れ子になったdivクラスcard構造を避けてください。レイアウトをシンプルにしてパフォーマンスを最適化してください。

最適化前

<div class="card">
   <div class="card-body">
      <div>
         <div>
            <p>Nested Content</p>
         </div>
      </div>
   </div>
</div>

最適化後

<div class="card">
   <div class="card-body">
      <p class="card-text">Optimized Content</p>
   </div>
</div>

フォントの最適化

カスタムフォントをプリロードするか、システムフォントを使用して待機時間を減らすことができます。クリーンなdivクラスカードボディを使用すると、カードのビジュアルアピールがさらに強調されます。

例

<div class="card">
   <div class="card-body" style="font-family: 'Roboto', sans-serif;">
      <h5 class="card-title">Optimized Font</h5>
      <p class="card-text">Preloading ensures faster rendering for card content.</p>
   </div>
</div>

結論

Bootstrapカードコンポーネントは、CSSの動作に深く入ることなく、モダンなスタイルのWebページを作成できるBootstrapフレームワークへの強力な追加機能です。CSSクラスを追加することで、画像ギャラリー、ダッシュボードウィジェット、ブログ投稿、またはeコマースウェブサイトの製品を表示するカードレイアウトを追加できます。

新機能やコンポーネントの結果、Bootstrapは引き続き、特に独自のレスポンシブでモダンなスタイルのレイアウトを作成するために時間と予算、またはカスタムコードを生成するために必要なCSSの深い知識が不足している開発者向けに利用可能な強力なCSSフレームワークとして存在しています。

Bootstrapの基本を押さえているが、Bootstrapのスキルを次のレベルに引き上げる方法を考えている場合は、Bootstrap 4で最初のウェブサイトを構築するコースをチェックして、Bootstrapのパワーについて簡単で楽しい導入を試してみてください。

レスポンシブデザインのためのBootstrapカードコンポーネントのマスタリングに関するFAQ

Bootstrapカードコンポーネントとは何ですか？

BootstrapのCardコンポーネントは、テキスト、画像、マルチメディア用の見栄えの良いレイアウトを作成できる、現代的で柔軟なコンテンツコンテナです。CardはBootstrapのフレームワークの一部であり、開発者が情報をレスポンシブでモバイルフレンドリーな方法で整理するのに役立つよう設計されています。

Bootstrap Cardコンポーネントを作成する方法は？

Bootstrap Cardコンポーネントを作成するのは簡単です。カードというクラスのdivをコンテナとして使用し、その中にタイトル、テキスト、画像などのコンテンツを追加できます。以下に例を示します：

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is an example of a Bootstrap card body.</p>
  </div>
</div>

Bootstrapでカードの高さと幅を設定する方法は？

Bootstrapのカード幅や高さをインラインスタイルやBootstrapのユーティリティクラスを使用してカスタマイズできます。例えば：

<div class="card" style="width: 20rem; height: 15rem;">
  <div class="card-body">
    <h5 class="card-title">Custom Card</h5>
    <p class="card-text">This card has a custom height and width.</p>
  </div>
</div>

また、カードの寸法をレスポンシブに設定するために、w-50やh-100のようなカード高さのBootstrapユーティリティクラスを使用することもできます。

Bootstrapでカードのリサイズ方法は？

カードのリサイズには、幅のためのw-25、w-50、w-75や、高さのためのh-autoやh-100などのカードサイズのBootstrapユーティリティクラスを使用できます。これにより、余分なCSSが必要なく、カードがレイアウトに適応することができます。以下に例を示します：

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Responsive Card</h5>
    <p class="card-text">This card resizes based on its parent container.</p>
  </div>
</div>

Bootstrapでカードのタイトルを作成する方法は？

カードにタイトルを追加するには、class=”card-title”を持つ

要素を使用します。このクラスにより、タイトルがBootstrapのデザイン基準に一貫してスタイリッシュになります。

<div class="card">
   <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">This is an example of a Bootstrap card with a title.</p>
   </div>
</div>

Bootstrapでcard-bodyクラスを使用する方法は？

card-bodyクラスは、Bootstrapのカード内でパディングを提供し、コンテンツを整理するためのユーティリティクラスです。これはカードのコンテンツのメインコンテナです。

<div class="card">
   <div class="card-body">
      <h5 class="card-title">Using card-body</h5>
      <p class="card-text">This is the content inside the card-body section.</p>
   </div>
</div>

Bootstrapカードサイズの修正方法

カードのサイズを修正するには、インラインスタイルやユーティリティクラスを使用して特定の幅と高さを適用します。例：

<div class="card" style="width: 250px; height: 300px;">
  <img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Fixed Size Card</h5>
    <p class="card-text">This card has a fixed size for consistency.</p>
  </div>
</div>

Bootstrapでカードサイズを調整する方法

カードのサイズは、BootstrapのユーティリティクラスやCSS Gridを使用して動的に調整できます。レスポンシブなカードサイズの例：

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">Adjustable size based on parent grid.</p>
      </div>
    </div>
  </div>
</div>

Bootstrapカードの背景と境界線をカスタマイズできますか？

はい、Bootstrapは豊富なカスタマイズ用のユーティリティクラスを提供しています。背景色にはbg-primary、境界スタイルにはborder-successを使用します。例：

<div class="card bg-info border-danger">
  <div class="card-body">
    <h5 class="card-title">Custom Background</h5>
    <p class="card-text">This card has a custom background and border.</p>
  </div>
</div>

カードと画像の使用方法

Bootstrapは、card-img-topまたはcard-img-bottomを使用して画像をカード内でサポートしています。例：

<div class="card">
  <img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">This card includes a top image.</p>
  </div>
</div>

Bootstrapでdivクラスcard bodyを使用する方法

divクラスcard bodyは、Bootstrap内のカード内のメインコンテンツエリアを定義します。これは、テキスト、画像、およびカード内の他の要素に対して一貫したスペーシングとパディングを提供します。

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is some text within a card body.</p>
  </div>
</div>

Bootstrapのpクラスcard textとは何ですか？

pクラスcard textは、Bootstrap内のカード本体内のテキストコンテンツをスタイリングするために使用されます。これは、テキストを清潔でプロフェッショナルに見せるためのデフォルトのタイポグラフィスタイルを適用します。

<div class="card">
  <div class="card-body">
    <p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
  </div>
</div>

Bootstrapでカードサイズを拡大する方法

カードのサイズを拡大するには、幅と高さを調整して、フル幅のw-100を使用するか、スタイルを使用して寸法を指定します。例：

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Large Card</h5>
    <p class="card-text">This card has an increased size for visibility.</p>
  </div>
</div>

カードを同じ高さにする方法は？

.d-flexと.align-items-stretchを使用します。

<div class="row g-3">
   <div class="col-md-4 d-flex">
      <div class="card flex-fill">
         <h5 class="card-title">Card 1</h5>
         <p class="card-text">Aligned with others.</p>
      </div>
   </div>
</div>