コンポーネント

【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> –>

 

card-deckクラスを外した場合

縦並びになりました。

まとめ

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

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

画像なしのカード

画像ありのカード

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

 

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

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

ABOUT ME
ゆう
エンジニア歴7年。 大学卒業後、フィールドエンジニア職に就くが「手に職をつけたい」と思い、未経験からWEBデザイナーに転職。 その後、「WEB制作会社」「上場企業のECサイト運用」を経て、現在は「自社開発企業」のフロントエンドエンジニアとして仕事をしています。