カード３枚横並び

2024年5月20日

WEBサイト制作でかなりの頻度で出てくるカードタイプのコンテンツ３枚横並びを記述してみました。
なお、最近ではグリッドレイアウトで記述する人もいるかと思いますが、ここでは古典的な？
フレックスボックスで記述してみました。

①HTML

<div class="cards">
    <a href="#" class="card">
      <div class="card__img">
        <img src="images/card1.jpg" alt="">
      </div>
      <div class="card__sentence">
        <p class="card__title">タイトルが入ります。タイトルが入ります。</p>
        <p class="card__text">説明文が入ります。説明文が入ります。説明文が入ります。
                              説明文が入ります。説明文が入ります。説明文が入ります。
                              説明文が入ります。説明文が入ります。説明文が入ります。
   
        </p>
      </div>
      <div class="card__bottom">
        <div class="card__category">カテゴリ</div>
        <div class="card__date">2021.07.20</div>
      </div>
    </a>
    <a href="#" class="card">
      <div class="card__img">
        <img src="images/card2.jpg" alt="">
      </div>
      <div class="card__sentence">
        <p class="card__title">タイトルが入ります。タイトルが入ります。</p>
        <p class="card__text">説明文が入ります。説明文が入ります。説明文が入ります。</p>
      </div>
      <div class="card__bottom">
        <div class="card__category">カテゴリ</div>
        <div class="card__date">2021.07.20</div>
      </div>
    </a>
    <a href="#" class="card">
      <div class="card__img">
        <img src="images/card3.jpg" alt="">
      </div>
      <div class="card__sentence">
        <p class="card__title">タイトルが入ります。タイトルが入ります。</p>
        <p class="card__text">説明文が入ります。説明文が入ります。説明文が入ります。</p>
      </div>
      <div class="card__bottom">
        <div class="card__category">カテゴリ</div>
        <div class="card__date">2021.07.20</div>
      </div>
    </a>
  </div>

➁CSS

.cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 20px;
  padding-right: 20px;

}
.cards::before {
    content: "";
    display: block;
    width: 32%;
    order: 1;
}
 .cards::after {
    content: "";
    display: block;
    width: 32%;
}
.card {
  width: 32%;
  display: flex;
  flex-direction: column;
  padding-top: 0px;
}

@media screen and (max-width: 768px) {
  .cards {
   flex-direction: column;
  }
  .card{
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding-top: 32px;
  }

}

.card__sentence {
  background-color: #ffffff;
  flex-grow: 1;
  padding-left: 24px;
  padding-right: 24px;
}

.card__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 35px;
  letter-spacing: 1px;
  color: #333333;
}
@media screen and (max-width: 768px) {
  .card__title {
    padding-top: 6px;
  }
}

.card__text {
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 1px;
  color: #333333;
  padding-top: 12px;

}
@media screen and (max-width: 768px) {
  .card__text {
    padding-top: 0px;
  }
}

.card__bottom {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 24px;
  padding-left: 24px;
  padding-right: 24px;
}

.card__category {
  background-color: #F9F871;
  font-size: 14px;
  padding-left: 4px;
}
@media screen and (max-width: 768px) {
  .card__category {
    padding-left: 0px;
  }
}

.card__date {
  font-size: 14px;
}

●ポイント

１）カード１枚目のみコメントの量が増えても、カード３枚の高さをそろえるため、.card__sentenceに
　　flex-grow: 1;を記述
２）カードの枚数が３枚以外の数でも、適切な配置にするため、 .cards::beforeと.cards::afterを記述
　　特にHTMLからWordPress化する場合は、カード枚数が動的に変更となるため、必要不可欠
３）カードのコンテンツから、記事などのページに飛ぶことが多いため、あらかじめaタグを設置　

よかったらシェアしてね！