card
2022年6月25日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回はBootstrapの「card」について書きます。
参考：Bootstrap4.2日本語リファレンス｜Cards
cardとは
Bootstrapにおけるcardは、画像や文字をタイル状に並べることができるコンポーネント（部品）のことを指します。
うちのブログ一覧ページで使っています。
基本の形
<div class="card">
<img class="card-img-top" src="img/dog.jpg">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<h6 class="card-subtitle text-muted">サブタイトル</h6>
<p class="card-text">テキストテキストテキストテキスト</p>
<button class="btn btn-sm btn-primary">ボタン</button>
</div>
</div>
タイトル
サブタイトル
テキストテキストテキストテキスト
.cardや.card-img-topはデフォルトではborder-radius（角丸）がついています。お好みで角を尖らせてもよいと思います。
画像とテキストを横並びに
グリッドシステム（rowとcol）とno-guttersを使います。
col-〇で割合を決めます（以下の例は画像：テキスト＝4:8）
そのままだとテキストの量が増えた場合に画像の下に空白ができてしまうので、 object-fit:coverでサイズに応じて自動でトリミングされるようにします。
.card-img-left {
position: relative;
width: 100%;
padding-top: 33%;
margin: 0 auto;
}
.card-img-left img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
border-top-left-radius: calc(0.25rem - 1px);
border-bottom-left-radius: calc(0.25rem - 1px);
}<div class="card w-100">
<div class="row no-gutters">
<div class="col-4 card-img-left">
<img src="img/cat.jpg">
</div>
<div class="col-8 align-self-center">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<h6 class="card-subtitle text-muted">サブタイトル</h6>
<p class="card-text">テキストテキスト</p>
</div>
</div>
</div>
</div>
タイトル
サブタイトル
テキストテキスト
col-の部分をcol-sm-に変えれば、画面幅575pxまでは縦積み、576px以上だと横並び、のようにできます。
<div class="card w-100">
<div class="row no-gutters">
<div class="col-sm-4 card-img-left">
<img src="img/cat.jpg">
</div>
<div class="col-sm-8 align-self-center">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<h6 class="card-subtitle text-muted">サブタイトル</h6>
<p class="card-text">テキストテキスト</p>
</div>
</div>
</div>
</div>
タイトル
サブタイトル
テキストテキスト
cardを並べる
card-groupで囲むと、画面幅576px以上では均等に横にくっついて並びます。
画面幅575px以下だと縦に並びます。
cardの高さは、最も高さの高いcardに合わせて自動で揃います。
<div class="card-group">
<div class="card">
<img class="card-img-top" src="img/lion.jpg">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<h6 class="card-subtitle text-muted">サブタイトル</h6>
<p class="card-text">テキストテキストテキストテキスト</p>
<button class="btn btn-sm btn-warning">ボタン</button>
</div>
</div>
<div class="card">
<img class="card-img-top" src="img/tiger.jpg">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<h6 class="card-subtitle text-muted">サブタイトル</h6>
<p class="card-text">テキストテキスト</p>
<button class="btn btn-sm btn-warning">ボタン</button>
</div>
</div>
<div class="card">
<img class="card-img-top" src="img/cheetah.jpg">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<h6 class="card-subtitle text-muted">サブタイトル</h6>
<p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<button class="btn btn-sm btn-warning">ボタン</button>
</div>
</div>
</div>
タイトル
サブタイトル
テキストテキストテキストテキスト
タイトル
サブタイトル
テキストテキスト
タイトル
サブタイトル
テキストテキストテキストテキストテキストテキストテキストテキスト
隙間を空けて並べる
card-deckで囲むと、隙間が空いて均等に並びます。
画面幅575px以下だと縦に並びます。
この場合もcardの高さは自動で揃います。
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="img/hawk.jpg">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<h6 class="card-subtitle text-muted">サブタイトル</h6>
<p class="card-text">テキストテキストテキストテキスト</p>
<button class="btn btn-sm btn-danger">ボタン</button>
</div>
</div>
<div class="card">
<img class="card-img-top" src="img/peacock.jpg">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<h6 class="card-subtitle text-muted">サブタイトル</h6>
<p class="card-text">テキストテキスト</p>
<button class="btn btn-sm btn-danger">ボタン</button>
</div>
</div>
<div class="card">
<img class="card-img-top" src="img/condor.jpg">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<h6 class="card-subtitle text-muted">サブタイトル</h6>
<p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<button class="btn btn-sm btn-danger">ボタン</button>
</div>
</div>
</div>
タイトル
サブタイトル
テキストテキストテキストテキスト
タイトル
サブタイトル
テキストテキスト
タイトル
サブタイトル
テキストテキストテキストテキストテキストテキストテキストテキスト
レンガ状に並べる
card-columnsで囲むと、高さの異なるcardをレンガ状に整列してくれます。
ただし順番は、左上→左下→中央上→中央下→右上→右下のようになります。
デフォルトでは画面幅768px以下で1列、769px～991pxで2列、992px以上で3列になります。
<div class="card-columns">
<div class="card">
<img class="card-img" src="img/cat1.jpg">
</div>
<div class="card">
<img class="card-img" src="img/cat2.jpg">
</div>
<div class="card">
<img class="card-img" src="img/cat3.jpg">
</div>
<div class="card">
<img class="card-img" src="img/cat4.jpg">
</div>
<div class="card">
<img class="card-img" src="img/cat5.jpg">
</div>
<div class="card">
<img class="card-img" src="img/cat6.jpg">
</div>
<div class="card">
<img class="card-img" src="img/cat7.jpg">
</div>
<div class="card">
<img class="card-img" src="img/cat8.jpg">
</div>
<div class="card">
<img class="card-img" src="img/cat9.jpg">
</div>
</div>
まとめ
cardだけなら、card-groupやcard-deckで高さがちゃんと揃う。
でもMixItUpに組み込むと高さが揃わない。
MixItUpでは、並び替えたりするたびにcardの高さを変えることはできないのかもしれません。
もうちょっと解決法を考えてみます。
