画像とテキスト2カラム

見本

テキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右

画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく

上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央

説明・補足

一番上から画像左、画像右、画像を小さく(480px→300px)、上下中央寄せ
SP時のレイアウトは同じ

HTML

<div class="col2">
  <p class="col2_imgArea"><img src="https://seisaku.hero-intra.com/tips/wp-content/uploads/2021/10/col2_dummy.jpg" width="750" height="500" alt=""></p>
  <div class="col2_textArea">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="col2 col2-right">
  <p class="col2_imgArea"><img src="https://seisaku.hero-intra.com/tips/wp-content/uploads/2021/10/col2_dummy.jpg" width="750" height="500" alt=""></p>
  <div class="col2_textArea">画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右</div>
</div>
<div class="col2 col2-right">
  <p class="col2_imgArea col2_imgArea-s"><img src="https://seisaku.hero-intra.com/tips/wp-content/uploads/2021/10/col2_dummy.jpg" width="750" height="500" alt=""></p>
  <div class="col2_textArea">画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく</div>
</div>
<div class="col2 col2-center">
  <p class="col2_imgArea"><img src="https://seisaku.hero-intra.com/tips/wp-content/uploads/2021/10/col2_dummy.jpg" width="750" height="500" alt=""></p>
  <div class="col2_textArea">上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央</div>
</div>

CSS

.col2_imgArea img {
  border-radius: 10px;
}
@media print, screen and (min-width: 641px) {/* pc only */
  .col2 {
    display: flex;
    flex-wrap: wrap;
  }
  .col2_imgArea {
    width: 480px;
  }
  .col2_imgArea img {
    border-radius: 10px;
  }
  .col2_imgArea.col2_imgArea-s {
    width: 300px;
  }
  .col2_textArea {
    flex: 1;
    margin-left: 30px;
  }
  .col2.col2-center {
    align-items: center;
  }
  .col2.col2-right .col2_imgArea {
    order: 1;
    margin-left: 30px;
  }
  .col2.col2-right .col2_textArea {
    order: 0;
    margin-left: 0;
  }
}
@media only screen and (max-width: 640px) {/* sp */
  .col2_imgArea {
    margin-bottom: 15px;
  }
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です