Bootstrap4では、カード型のデザインを簡単につくることができます。そして、つくったカード全体にリンクをはる際も、CSSのカスタマイズ一切なしで対応できます！
a要素を「a.box{display:block:}」でブロック要素化して…といった面倒な作業とはお別れできます。
カード全体にリンクをはる方法 基本形
リンクなし
Card title
This is some text within a card block.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |
Card-deckで隣り合うカードの高さを揃えたときに、カード全体にリンクをはる方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
<a class=”card-block”>とすると、縦の高さいっぱいのリンクエリアとはならず、コンテンツの高さ分だけのリンクエリアとなります。