flexを使ったホースシューレイアウトのコーディング

先輩！自分のコーダー人生は終わりました！

こんなコーディング不可能のカードパターンは無理です

■　■　■
　■　■

終わらない！人の夢は終わらないぞ！

これはホースシュー配置だね！正式な名前はないけど、他にもダイヤモンド配置、クロス配置とか呼んでる人もいるね！

今回はこのホースシュー配置のコーディングをやってみよう！

今回のゴール！
flexレイアウトを組む
カードとカードの間に余白を取る
- 子要素にmarginをとる方法
- 親要素にgapをつける方法
まとめ

今回のゴール！

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ホースシュー配置</title>
  <link rel="stylesheet" href="riset.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="cards">
    <div class="card">
      <img class="card__img" src="https://placehold.jp/040005/ffffff/150x150.png" alt="">
      <div class="card__content">
        <h2 class="card__cardtit">タイトル</h2>
      </div>
      <div class="card__cardtxt">
        <p>
          ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
        </p>
      </div>
    </div>
    <div class="card">
      <img class="card__img" src="https://placehold.jp/040005/ffffff/150x150.png" alt="">
      <div class="card__content">
        <h2 class="card__cardtit">タイトル</h2>
      </div>
      <div class="card__cardtxt">
        <p>
          ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
        </p>
      </div>
    </div>
    <div class="card">
      <img class="card__img" src="https://placehold.jp/040005/ffffff/150x150.png" alt="">
      <div class="card__content">
        <h2 class="card__cardtit">タイトル</h2>
      </div>
      <div class="card__cardtxt">
        <p>
          ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
        </p>
        <div class="card__cardlink">
          <a href="">もっと見る</a>
        </div>
      </div>
    </div>
    <div class="card">
      <img class="card__img" src="https://placehold.jp/040005/ffffff/150x150.png" alt="">
      <div class="card__content">
        <h2 class="card__cardtit">タイトル</h2>
      </div>
      <div class="card__cardtxt">
        <p>
          ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
        </p>
      </div>
    </div>
    <div class="card">
      <img class="card__img" src="https://placehold.jp/040005/ffffff/150x150.png" alt="">
      <div class="card__content">
        <h2 class="card__cardtit">タイトル</h2>
      </div>
      <div class="card__cardtxt">
        <p>
          ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
        </p>
      </div>
    </div>
  </div>
</body>

</html>

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card__inner {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

@media screen and (min-width: 767px) {
  .card__inner {
    max-width: 1200px;
  }
}

.card__img {
  width: 100%;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.textsvg-reason {
  width: 11rem;
  margin: 0 auto;
  display: block;
}

.card__content {
  width: 100%;
  margin-top: 3rem;
  text-align: center;
  display: flex;
  justify-content: left;
  align-items: center;
}

@media screen and (min-width: 767px) {
  .card__content {
    margin-top: 1rem;
  }
}

.card__tit {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 2.25;
  text-align: center;
  color: #252b43;
}

.card__tit span {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: normal;
  color: #000;
}

.card__cardtit {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.53;
  color: #252b43;
  margin-top: 0.8rem;
  text-align: left;
  margin-top: 0;
  flex: 1;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 767px) {
  .card__cardtit {
    text-align: center;
  }
}

.card__cardtxt {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.63;
  text-align: left;
  color: #000;
  margin-top: 3rem;
}

.card {
  background-color: #f9f6f0;
  width: 100%;
  margin-top: 6rem;
}

@media screen and (min-width: 767px) {
  .card {
    width: 30%;
    margin: 2rem;
  }
}

.card__cardlink {
  margin-top: 2.8rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2;
  color: #252b43;
  text-align: center;
}

.card__cardlink a {
  border-bottom: 1px solid #252b43;
  position: relative;
}

flexレイアウトを組む

テキストや画像の設定以外の、レイアウトの構成をメインに解説していきます。

先程のコードを抜粋して部分でみていきましょう。

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

  .card__inner {
    max-width: 1200px;
  }

.cardsはカード全体を囲っている親要素であり、ここにdisplay:flex;を設定することで、子要素のカードを横に配置していきます。

今回は子要素のカードが親要素の.card__innerの幅、1200pxを超えた分だけ、折り返すように設定するために、flexと合わせてflex-wrap: wrap;を設定します。

全体を中央に寄せるためにjustify-content: center;を配置します。

現状、このように横並びで折り返し、中央に全て寄ってるかと思います。

カードとカードの間に余白を取る

ここから実際に各カードの間に余白(margin)をとっていきましょう。

余白の取り方は子要素へmarginを指定する方法と親要素にgapを指定する方法があります。

子要素にmarginをとる方法

  .card {
    width: 30%;
    margin: 2rem;
  }

こちらはカードに直接marginを指定し余白を調整するやり方です。
下記のgapと違い、子要素のカードをnth-of-typeなどで個別で指定することで、カード1枚ごとに余白数を指定できます。

親要素にgapをつける方法

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

こちらは親要素に一括指定することで、まとめて余白を指定することが可能でとても便利ですが、2024年3月時点で一部ブラウザに対応していないため、推奨はされておりません。

ここまでで、見本のレイアウトが完成します。

親要素に全体のレイアウトのルールを設定し、子要素でカードとカードの距離を調整する方法となります。

まとめ

いかがでしたでしょうか？

このレイアウトは筆者が苦戦した記憶が強く残っており、ぜひやり方を共有したいと思い、記載させていただきました。

参考になれば幸いです。