[web制作][初心者向け] flexboxを使って、並び替えができる画像とテキストの組み合わせを作る

flexboxについて学んでいる際に便利なテクニックを知ったので、備忘録として残したいと思います。

こういうのが作りたい

以下の図のような、画像と対になるテキストを１組として配置したい。

まずはHTML

まずはHTMLからです。
今回はこの画像とテキストの１つの組み合わせをclass="card"とします。
遊○王カードや、ポケ○ンカードを想像すると、上半分が画像で下半分に説明書あるという感じで、今回作りたいものに似ていますよね。
よって"card"はピッタリなクラス名ですね！

具体的なコードはこちら。

index.html

<!-- 1つの画像と１つのテキストを持つclass="card"を親要素にする -->
<div class="card">
  <img class="card-image" src="" alt="" />
  <p class="card-text">Text1</p>
</div>
<!-- ２つ目のcard -->
<div class="card">
  <img class="card-image" src="" alt="" />
  <p class="card-text">Text２</p>
</div>
<!-- 以下のcardも同様に-->
.
.
.

class="card"が親要素になり、
その中に対になるclass="card-image"とclass="card-text"が子要素として入っていますね。

次はCSS

次はCSSです。
早速flexboxを使用します。
親要素であるclass="card"をdisplay:flexでflexコンテナにします。
すると子要素はデフォルトで横並びで表示されるので、画像の右隣にテキストという組み合わせがもう完成します！

style.css

.card {
  display: flex;
}

形を整える

この時点で画像の隣に対になるテキストという組み合わせができていますが、画像やテキストのサイズによって大きさや配置がバラバラになってしまうので、CSSを使って理想の形に近づけていきます。

具体的には、この辺が必要になるかと。

ctyle.css

.card {
  display: flex;
/* 画像とテキストをそれぞれ垂直方向の（縦軸の）中央に配置する */
  align-items: center;
/* 画像とテキストの間に隙間を作る（値は適当・隙間がいらない場合は不要） */
  gap: 2rem;
}

.card-image {
/* 画面全体の半分に画像が配置されるようにする */
  width: 50%;
}

.card-text {
/* 画面全体の半分にテキスト配置されるようにする */
  width: 50%;
/* テキストを水平方向の（横軸の）中央に配置する */
  text-align: center;
}

すると、こんな感じになるはず。

カードの左右を入れ替える

最後に、見本と同じよう画像とテキストを交互に表示させたいので、HTMLとCSSに以下の内容を追加します。

index.html

<div class="card">
  <img class="card-image" src="img/antique.jpg" alt="" />
  <p class="card-text">Text1</p>
</div>
<!-- classに"card-reverse"を追加 -->
<div class="card card-reverse">
  <img class="card-image" src="img/catalog.jpg" alt="" />
  <p class="card-text">Text２</p>
</div>
<!-- 以下も１つおきにclass="card-reverse"を追加 -->
.
.
.

style.css

.card-reverse {
/* 子要素の並ぶ向きを右から左に指定する */
  flex-direction: row-reverse;
}

完成です。

おまけ　レスポンシブ対応

おまけですが、画面が狭い時に、以下のようなコードを加えると１組の画像とテキストを上下に配置することができます。

style.css

@media (max-width: 767px) {
  .card {
    flex-direction: column;
  }
}

するとこんな感じになります。

最終的なコードはこちらになります。

index.html

<div class="card">
  <img class="card-image" src="img/antique.jpg" alt="" />
  <p class="card-text">Text1</p>
</div>
<div class="card card-reverse">
  <img class="card-image" src="img/catalog.jpg" alt="" />
  <p class="card-text">Text2</p>
</div>

style.css

.card {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.card-image {
  width: 50%;
}

.card-text {
  width: 50%;
  text-align: center;
}

.card-reverse {
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .card {
    flex-direction: column;
  }
}