お悩み一覧に戻る

画像や要素を2×2や3×2で配置したい

2025.03.22

Webサイトで2×2や3×2のレイアウトを作る際、Flexboxを活用するのが効率的です。以下では、やってしまいがちなミスと、正しい実装方法を詳しく解説します。

❌ NG例：親要素を分けてしまうパターン

以下のように「2×2だから」という理由で、2つの<ul>を作成するのは非効率です。これでは余計なHTML要素が増え、管理が煩雑になります。

<!-- NG：同じ種類のものを並べる場合にはわざわざ別な親要素で囲みません -->
<ul class="example">
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
</ul>
<ul class="example">
    <li><img src="image3.jpg" alt=""></li>
    <li><img src="image4.jpg" alt=""></li>
</ul>

✅ OK例：1つの親要素にまとめる

Flexboxは、1つの親要素内で柔軟に要素を並べることができるため、次のように1つの<ul>内にすべての<li>をまとめるのが良い方法です。

<!-- OK：全て一つにくくってよいです -->
<ul class="example">
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
    <li><img src="image3.jpg" alt=""></li>
    <li><img src="image4.jpg" alt=""></li>
</ul>

CSS解説：2×2レイアウト

CSSで2×2のレイアウトを作成する際は、以下のポイントに注目します。

  • 各要素の横幅は48%に設定
  • display: flex;で横並びに
  • flex-wrap: wrap;で折り返しを可能に
  • gapで要素間の余白を調整
.example {
    display: flex;
    flex-wrap: wrap; /* これを指定すると折り返しが有効になります */
    gap: 4%; /* 項目間の余白です。適宜調整してください */
}

.example li{
    width: 48%; /* 項目2つ＋余白(4%)で100%に収まるように調整 */
}

/* 48%という指定は、次の計算に基づいています。 48% x 2 + 4% = 100% */

3×2なら33%弱です。

<ul class="example">
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
    <li><img src="image3.jpg" alt=""></li>
    <li><img src="image4.jpg" alt=""></li>
    <li><img src="image5.jpg" alt=""></li>
    <li><img src="image6.jpg" alt=""></li>
</ul>
.example {
    display: flex;
    flex-wrap: wrap;
    gap: 2%; /* 項目間の余白です。適宜調整してください */
}

.example li{
    width: 32%; /* 項目3つ＋余白(2%)×2 で100%に収まるように調整 */
}

/* 32%の指定は、次の計算に基づいています。 32% x 3 + 2% x 2 = 100% */

関連したお悩み

お悩み一覧に戻る