Bootstrap4では、カード型のデザインを簡単につくることができます。
そして、つくったカード全体にリンクをはる際も、CSSのカスタマイズ一切なしで対応できます!
a要素を「a.box{display:block:}」でブロック要素化して…といった面倒な作業とはお別れできます。
カード全体にリンクをはる方法 基本形
リンクなし
Card title
This is some text within a card block.
<div class="row"> <div class="col-lg-6"> リンクなし <div class="card"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text"> This is some text within a card block. </p> </div> </div> </div> <div class="col-lg-6"> リンクあり <a href="#" class="card"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text"> This is some text within a card block. </p> </div> </a> </div> </div>
カード全体にリンクをはりたい場合は、
<div class=”card”>ではなく、<a class=”card”>とするのがポイントです。
Card-deckで隣り合うカードの高さを揃えたときに、カード全体にリンクをはる方法
<div class="card-deck"> <div class="card"> <a href="#" class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </a> </div> <div class="card"> <a href="#" class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </a> </div> </div>
カード内のコンテンツを囲むdivを<div class=”card-block”>ではなく、<a class=”card-body”>
とするのがポイントです。
<a class=”card-block”>とすると、縦の高さいっぱいのリンクエリアとはならず、コンテンツの高さ分だけのリンクエリアとなります。