Bootstrap 5 カードレイアウト：エレガントな2列カード表示を簡単に作成
この記事では、Bootstrap 5 フレームワークを使用して、美しく実用的な2列のカードレイアウトをすばやく構築する方法について説明します。詳細なコード例と説明を提供し、カードレイアウトのスキルを簡単に習得できるようにします。
一、Bootstrap カードの基本
Bootstrap カードコンポーネントとは
カードコンポーネントは、画像、テキスト、リンクなどの情報を表示するために使用される、Bootstrap によって提供される柔軟で拡張可能なコンテンツコンテナです。
カードコンポーネントの構造
.card：カードコンテナ.card-header：カードヘッダー.card-body：カード本体.card-footer：カードフッター.card-img-top：上部画像.card-img-bottom：下部画像.card-title：カードタイトル.card-text：カードテキスト
二、2列のカードレイアウトを作成する
1. グリッドシステムを使用する
Bootstrap のグリッドシステム (.row と .col-*) を使用して、ページを2つの列に分割し、各列にカードを配置します。
<div class="row">
<div class="col-md-6">
<div class="card">
</div>
</div>
<div class="col-md-6">
<div class="card">
</div>
</div>
</div>
2. 間隔を調整する
ユーティリティクラス (ms-*, me-*, my-*, mx-*, mt-*, mb-*) を使用して、カード間のスペースを調整します。
<div class="row g-4">
<div class="col-md-6">
<div class="card">
</div>
</div>
<div class="col-md-6">
<div class="card">
</div>
</div>
</div>
3. カードコンテンツを追加する
必要に応じて、画像、タイトル、テキスト、ボタンなどのコンテンツをカードに追加します。
<div class="row g-4">
<div class="col-md-6">
<div class="card">
<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>
<div class="col-md-6">
<div class="card">
<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>
</div>
三、応用テクニック
- さまざまなカードサイズを使用する：
.card-sm、.card-lg - カードグループを作成する：
.card-group - カードの背景色と境界線スタイルを使用する
- カードの影を追加する
まとめ
上記の手順に従うことで、Bootstrap 5 フレームワークを使用して、美しく実用的な2列のカードレイアウトを簡単に作成し、コンテンツを表示できます。
Bootstrap カードレイアウトに関するQ&A
| 質問 | 回答 |
|---|---|
| カードのサイズを変更するにはどうすればよいですか？ | .card-sm クラスを使用して小さなカードを作成し、.card-lg クラスを使用して大きなカードを作成します。 |
| カードに影を追加するにはどうすればよいですか？ | .shadow-sm、.shadow、.shadow-lg のようなユーティリティクラスを使用して、カードに影を追加できます。 |
| カードを水平方向に配置するにはどうすればよいですか？ | .card-deck または .card-group クラスを使用して、カードを水平方向に配置できます。 |
その他の参考記事:bootstrap card 横並び