Cards：カードデザイン
bootstrapの基本カードデザイン card-group > card
黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

Last updated 3 mins ago

黒龍 しずく

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

Last updated 3 mins ago

黒龍 火いら寿

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

Last updated 3 mins ago

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

Last updated 3 mins ago

黒龍 しずく

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

Last updated 3 mins ago

黒龍 火いら寿

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

Last updated 3 mins ago



<div class="card-group">

  <div class="card">
  <img class="card-img-top" src="/image/for_back1.jpg">
    <div class="card-body">
      <h5 class="card-title">黒龍 大吟醸　龍</h5>
      <p class="card-text">これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>

</div>
bootstrapの基本カードデザイン : row > colで配置
class="card mb-4 shadow-sm" 影クラス
card p-4 余白入り

影：shadow-sm　自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

影：z-depth-2　自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

影：z-depth-5　自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。



<div class="row">

<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="/image/for_back1.jpg">
    <div class="card-body">
      <div class="card-title h4-responsive">黒龍 大吟醸　龍</div>
      <p class="card-text">これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。</p>
    </div>
  </div>
</div>

</div>
.fullimg ::親要素に
card-body z-shade-2で文字に影付き
card p-4 余白入り

影：shadow-sm　自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

影：z-depth-2　自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

影：z-depth-5　自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。



<div class="row">

<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="/image/for_back1.jpg">
    <div class="card-body">
      <div class="card-title h4-responsive">黒龍 大吟醸　龍</div>
      <p class="card-text">これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。</p>
    </div>
  </div>
</div>

</div>
斜め区切り: clip-path プラス fadebox
黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

黒龍 大吟醸　龍

これは写真の解説文付きのカードです。自然に説明を加えることができます。PR文を記載します。

上付きの影が無理なら、画像側でやる？？

  .kesa > .card-img-top  {
   margin-bottom: 5rem;
  }
  .kesa > .card-body {
   color: #000;
   position: absolute;
   height: 8rem;
   overflow: hidden;
   bottom: 0; left: 0; right: 0;
   background-color: #fff;
   padding: 1rem;
   padding-top: 3rem;
   clip-path: polygon(0 0, 100% 32%, 100% 100%, 0% 100%);
  }