We Blog Weblog

card

Web

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(角丸)がついています。お好みで角を尖らせてもよいと思います。

画像とテキストを横並びに

グリッドシステムrowcol)と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に組み込むと高さが揃わない。

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

MixItUpでは、並び替えたりするたびにcardの高さを変えることはできないのかもしれません。

もうちょっと解決法を考えてみます。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP