Bootstrap5 カード

Bootstrap 5 のカード（Card）コンポーネントは、テキスト、画像、リスト、ボタンなどのさまざまなコンテンツを表示するための、強力で柔軟なコンテナです。

カードコンポーネントは Bootstrap 5 で改良・拡張され、より多くのカスタマイズオプションと柔軟なレイアウト方法を提供します。

カードコンポーネントは UI デザインで非常に一般的であり、特にブログ、ソーシャルメディア、ダッシュボード、その他のコンテンツ表示ページに適しています。

基

基本構造

Bootstrap 5 のカードコンポーネントには、次の一般的な要素が含まれます：

  • .cardカードの最外層コンテナ。
  • .card-bodyカードのメインコンテンツ領域。
  • .card-titleカードのタイトル部分。
  • .card-textカードのテキスト部分。
  • .card-img-top 或 .card-img-bottomカードの上部または下部の画像。

カードのスタイルクラスの説明：

クラス名説明使用例
.cardカードのコンテナクラス。カード全体をラップします。<div class="card">...</div>
.card-bodyカードのコンテンツを含むコンテナ。通常、テキストやタイトルなどを配置します。<div class="card-body">...</div>
.card-titleカードのタイトルクラス。通常、カードのメインタイトルを含みます。<h5 class="card-title">Card Title</h5>
.card-textカードのテキストクラス。通常、カードの本文を含みます。<p class="card-text">Some quick example text...</p>
.card-img-topカードの上部の画像クラス。通常、カード上部の画像を表示するために使用します。<img src="image.jpg.html" class="card-img-top">
.card-img-bottomカードの下部の画像クラス。通常、カード下部の画像を表示するために使用します。<img src="image.jpg.html" class="card-img-bottom">
.card-headerカードのヘッダー領域。タイトルやその他のコンテンツを配置します。<div class="card-header">Card Header</div>
.card-footerカードのフッター領域。追加情報や操作ボタンなどを配置します。<div class="card-footer">Card Footer</div>
.card-linkカード内にリンクを作成するために使用します。<a href="../index.html" class="card-link">Card link</a>
.card-deckBootstrap 5 では非推奨となり、rowとcol代わりに使用します。<div class="card-deck">...</div>
.card-groupBootstrap 5 では非推奨となり、rowとcol代わりに使用します。<div class="card-group">...</div>
.card-columns複数列レイアウトを使用し、カードは流動的レイアウトに従って配置されます。<div class="card-columns">...</div>
.card-subtitleカードのサブタイトル。通常、タイトルの下に表示されます。<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
.card-img-overlayカード画像の上にコンテンツ層を重ねます。テキストやその他の要素を表示するためによく使用されます。<div class="card-img-overlay">Overlay content</div>

シンプルなカード

Bootstrap5 の.cardと.card-bodyクラスを使用してシンプルなカードを作成できます。カードにはヘッダー、コンテンツ、フッター、およびさまざまな色設定を含めることができます。例は次のとおりです：

実例

<div class="card"> <div class="card-body">シンプルなカード</div> </div>

試してみる »

ヘッダーとフッター

.card-headerクラスはカードのヘッダースタイルを作成するために使用され、.card-footerクラスはカードのフッタースタイルを作成するために使用されます：

実例

<div class="card"> <div class="card-header">ヘッダー</div> <div class="card-body">コンテンツ</div> <div class="card-footer">フッター</div> </div>

試してみる »

さまざまな色のカード

Bootstrap 5 には、カード用のさまざまな背景色クラスが用意されています：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkと.bg-light。

実例

<div class="container"> <h2>さまざまな色のカード</h2> <div class="card"> <div class="card-body">基本カード</div> </div> <br> <div class="card bg-primary text-white"> <div class="card-body">プライマリカード</div> </div> <br> <div class="card bg-success text-white"> <div class="card-body">サクセスカード</div> </div> <br> <div class="card bg-info text-white"> <div class="card-body">インフォカード</div> </div> <br> <div class="card bg-warning text-white"> <div class="card-body">ワーニングカード</div> </div> <br> <div class="card bg-danger text-white"> <div class="card-body">デンジャーカード</div> </div> <br> <div class="card bg-secondary text-white"> <div class="card-body">セカンダリカード</div> </div> <br> <div class="card bg-dark text-white"> <div class="card-body">ダークカード</div> </div> <br> <div class="card bg-light text-dark"> <div class="card-body">ライトカード</div> </div> </div>

試してみる »

タイトル、テキスト、リンク

ヘッダー要素上で.card-titleクラスを使用してカードのタイトルを設定します。.card-bodyクラスはカード本文の内容を設定するために使用されます。.card-textクラスはカードを設定するために使用.card-bodyクラス内の `<p>` タグは、最後の行であれば下部マージンを削除できます。.card-linkクラスはリンクに色を設定するために使用されます。

実例

<div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some example text. Some example text.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div>

試してみる »

画像カード

私たちは <img>追加して.card-img-top（画像はテキストの上） または.card-img-bottom（画像はテキストの下）画像カードを設定します：

実例

<div class="card" style="width:400px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>

試してみる »

画像を背景として設定する場合は、使用できる.card-img-overlayクラス：

実例

<div class="card" style="width:500px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>

試してみる »
その他の拡張