【Bootstrapのコンポーネント】カード（Cards）に関して

記事内に商品プロモーションを含む場合があります

今回はBootstrapのカードコンポーネントについて解説していきます。

カードコンポーネントとは、カード形式のブロックがあり、その中に画像、タイトル、サブタイトル、本文があるようなタイプのものです。

よくあるのは、ブログ記事のリンクにカードが使われていることや、お買い物サイトの商品一覧にカードが使われていることが多いです。

それでは、どのようなカードの種類があるのかを見ていきましょう。

Bootstrapのカードコンポーネントの種類

画像なしのカード

画像ありのカード

それぞれについて、コードと実機での反映画面を見ていきます。

Bootstrapのカードコンポーネントの記述方法

画像なしのカード

まずは画像がないタイプです。

画像なしのカード

1.     <div class=”card” style=”width: 18rem;”>
2.       <div class=”card-body“>
3.         <h5 class=”card-title“>タイトル</h5>
4.         <h6 class=”card-subtitle“>サブタイトル</h6>
5.         <p class=”card-text“>本文本文本文本文本文本文本文本文本文</p>
6.       </div>
7.     </div>

 

シンプルなデザインのカードです。

画像ありのカード

画像ありのカード

1.     <div class=”card” style=”width: 18rem;”>
2.       <img src=”https://placehold.jp/286×200.png” class=”card-img-top” alt=””>
3.       <div class=”card-body”>
4.         <h5 class=”card-title”>タイトル</h5>
5.         <h6 class=”card-subtitle”>サブタイトル</h6>
6.         <p class=”card-text”>本文本文本文本文本文本文本文本文本文</p>
7.       </div>
8.     </div>

 

ポイントはimgタグが、card-bodytクラスの外側に記述しているところです。
cardクラス直下に書く必要があります。

【おまけ】複数のカードを横並びにする

横並びスタイル

1. 　 <div class=”card-deck“>
2.       <div class=”card” style=”width: 18rem;”>
3.         <img src=”https://placehold.jp/458×350.png” class=”card-img-top” alt=””>
4.         <div class=”card-body”>
5.           <h5 class=”card-title”>タイトル</h5>
6.           <h6 class=”card-subtitle”>サブタイトル</h6>
7.           <p class=”card-text”>本文本文本文本文本文本文本文本文本文</p>
8.         </div>
9.       </div>
10.       <div class=”card” style=”width: 18rem;”>
11.         <img src=”https://placehold.jp/458×350.png” class=”card-img-top” alt=””>
12.         <div class=”card-body”>
13.           <h5 class=”card-title”>タイトル</h5>
14.           <h6 class=”card-subtitle”>サブタイトル</h6>
15.           <p class=”card-text”>本文本文本文本文本文本文本文本文本文</p>
16.         </div>
17.       </div>
18.       <div class=”card” style=”width: 18rem;”>
19.         <img src=”https://placehold.jp/458×350.png” class=”card-img-top” alt=””>
20.         <div class=”card-body”>
21.           <h5 class=”card-title”>タイトル</h5>
22.           <h6 class=”card-subtitle”>サブタイトル</h6>
23.           <p class=”card-text”>本文本文本文本文本文本文本文本文本文</p>
24.         </div>
25.       </div>
26.     </div>

 

cardクラスを囲むように、card-deckクラスのdivタグを記述します。
また、カードはカードデックの横幅576px未満になると縦並びになります。

では、次にcard-deckクラスがない場合はどのように表示されるのかも見ておきましょう。

 

card-deckがない場合

1.     <!– <div class=”card-deck”> –>
2.       <div class=”card” style=”width: 18rem;”>
3.         <img src=”https://placehold.jp/458×350.png” class=”card-img-top” alt=””>
4.         <div class=”card-body”>
5.           <h5 class=”card-title”>タイトル</h5>
6.           <h6 class=”card-subtitle”>サブタイトル</h6>
7.           <p class=”card-text”>本文本文本文本文本文本文本文本文本文</p>
8.         </div>
9.       </div>
10.       <div class=”card” style=”width: 18rem;”>
11.         <img src=”https://placehold.jp/458×350.png” class=”card-img-top” alt=””>
12.         <div class=”card-body”>
13.           <h5 class=”card-title”>タイトル</h5>
14.           <h6 class=”card-subtitle”>サブタイトル</h6>
15.           <p class=”card-text”>本文本文本文本文本文本文本文本文本文</p>
16.         </div>
17.       </div>
18.       <div class=”card” style=”width: 18rem;”>
19.         <img src=”https://placehold.jp/458×350.png” class=”card-img-top” alt=””>
20.         <div class=”card-body”>
21.           <h5 class=”card-title”>タイトル</h5>
22.           <h6 class=”card-subtitle”>サブタイトル</h6>
23.           <p class=”card-text”>本文本文本文本文本文本文本文本文本文</p>
24.         </div>
25.       </div>
26.     <!– </div> –>

 

縦並びになりました。

まとめ

Bootstrapのカードコンポーネントについて、解説しました。

カードコンポーネントの種類は次の通りです。

画像なしのカード

画像ありのカード

【おまけ】複数のカードを横並びにする

 

なお、ここではカードコンポーネントの代表的なものをご紹介しましたが、より詳細なものについてはBootstrapのカードコンポーネントの公式ドキュメントをご確認ください。

今回の記事はここまでです。