【Flexbox】カード型レイアウトを作る２つの方法

CSS

カード型レイアウトの作り方
カード型レイアウトってどうやって作ればいいの？

そんな疑問にお答えします。

 

画像や四角形の要素がきれいに並んだレイアウトを「カード型レイアウト」と呼びます。

このようなものですね。

 

Image from Gyazo

 

何かの一覧ページであったり、画像ギャラリーページだったりと目にする機会は多いです。

ブログで投稿記事一覧がこのカード型レイアウトのケースもよく見かけると思います。

ですのでWeb制作者としてはこのレイアウトの作り方はマストで覚えておかなければなりません。

とはいっても一度覚えてしまえばその後は使い回すことで簡単に実装できます。

その作り方を一緒に見ていきましょう。

カード型レイアウトの作り方

今回はFlexboxを使った２種類の方法を紹介します。

カード型レイアウトを作る方法２選
  • 「nth-child」を使う方法
  • 「gap」を使う方法

 

space-betweenを使う方法の問題点

本題に入る前に「justify-content: space-between;」についてふれておきます。

横並びで余白も均等にする場合、最初に思い浮かぶのが「justify-content: space-between;」だと思います。

確かにこれはすごく使い勝手がよく、実際使う機会は多いです。

ですがひとつ注意しておかなければいけない点があります。

それはブログの投稿記事のようなケースで左詰めにしたいという場合です。

左から順番に詰めていきたいのに「justify-content: space-between;」だと両端基準の左右配置になってしまいます。

「justify-content: space-between;」だと両端に配置されてしまう

 

これだとまずいわけです。

左から順番に詰めて並べたい場合は「justify-content: space-between;」ではなく今回紹介する方法で配置する必要があります。

 

「nth-child」を使う方法

Image from Gyazo

 

コード表示

先に全コードを貼っておきます。

あとで解説します。

<ul class="hoge-list">
    <li class="hoge-item">
        <a href="" class="hoge-item-link">
            <div class="hoge-item-picture"><img src="img/01.jpeg" alt=""></div>
            <div class="hoge-item-body">
                <div class="hoge-item-title">ハスキーをFlexboxでならべる</div>
                <div class="hoge-item-text">ハスキーハスキーハスキーハスキーハスキーハスキーハスキーハスキーハスキーハスキーハスキーハスキーハスキーハスキーハスキーハスキー</div>
            </div>
        </a>
    </li>
<!-- 上記<li></li>があと7回続く -->

</ul>
.hoge-list {
  display: flex;
  flex-wrap: wrap;
}

.hoge-item {
  width: calc(33.33% - 30px * 2 / 3);
  margin-right: 30px;
  margin-top: 30px;
  background-color: #fff;
  padding: 30px;
}

.hoge-item:nth-child(3n) {
  margin-right: 0;
}

@media (max-width: 960px) {
  .hoge-item {
    width: calc(50% - 30px / 2);
    margin-right: 30px;
   }
  .hoge-item:nth-child(3n) {
    margin-right: 30px;
  }
  .hoge-item:nth-child(2n) {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .hoge-item {
    width: 100%;
    margin-right: 0;
  }
  .hoge-item:nth-child(3n) {
    margin-right: 0;
  }
}

.hoge-item-link {
  color: #333;
}

.hoge-item-picture img {
  width: 100%;
  height: auto;
}

.hoge-item-title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}

.hoge-item-text {
  padding: 10px;
}

 

コード解説

.hoge-list {
  display: flex;
  flex-wrap: wrap;
}

まず横並びにするために display: flex; とします。

そして、親要素の横幅を超えた子要素は折り返すように flex-wrap: wrap; とします。

 

.hoge-item {
  width: calc(33.33% - 30px * 2 / 3);
  margin-right: 30px;
  margin-top: 30px;
  background-color: #fff;
  padding: 30px;
}

ここでのポイントは２つあります。

１つ目のポイントは width: calc(33.33% – 30px * 2 / 3); です。

 

💡ポイント！　カードの横幅の計算式　

（100% / カード枚数 – 余白の幅 * 余白の数 / カード枚数 )

 

  • 1枚のカードの幅が100/3=33.33%
  • 余白の合計が30px×2=60px
  • カード枚数で割ると60px/3=20px
  • 1枚あたり20px差し引く
  • 3枚のカードと余白の合計が100%

 

カード型レイアウトの横幅計算

.hoge-item:nth-child(3n) {
  margin-right: 0;
}

もう１つのポイントは３列目のカードを margin-right: 0; とすることです。

これがないと上記の式では横幅が100%オーバーとなってカラム落ちしてしまいます。

 

@media (max-width: 960px) {
  .hoge-item {
    width: calc(50% - 30px / 2);
    margin-right: 30px;
  }
  .hoge-item:nth-child(3n) {
    margin-right: 30px;
  }
  .hoge-item:nth-child(2n) {
    margin-right: 0;
  }
}
レスポンシブ時も横幅の計算は先ほどと同じです。

 

💡ポイント！　カードの横幅の計算式　

（100% / カード枚数 – 余白の幅 * 余白の数 / カード枚数 )

 

あと、 margin-right: 0; とする位置が変わるので書き換えます。

 

@media (max-width: 767px) {
  .hoge-item {
    width: 100%;
    margin-right: 0;
  }
  .hoge-item:nth-child(3n) {
    margin-right: 0;
  }
}
１枚表示の場合はすべての margin-right: 0; をなくす必要があるので、さらに上書きします。

 

「gap」を使う方法

コード表示

.hoge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.hoge-item {
  width: calc(33.33% - 30px * 2 / 3);
  background-color: #fff;
  padding: 30px;
}

@media (max-width: 960px) {
  .hoge-item {
    width: calc(50% - 30px / 2);
  }
}
@media (max-width: 767px) {
  .hoge-item {
    width: 100%;
  }
}

.hoge-item-link {
  color: #333;
}

.hoge-item-picture img {
  width: 100%;
  height: auto;
}


.hoge-item-title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}


.hoge-item-text {
  padding: 10px;
}

コード解説

.hoge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

ここでのポイントは gap: 30px; です。

「gap」を使うことで要素間の余白が指定できます。

これがあることでmarginの指定はいらなくなりました。

 

gapで要素間の余白を指定

 

nth-childを書く必要がなくなるとコードもかなりスッキリしました。

レスポンシブも楽ですね。

 

まとめ：いろんな書き方を試してみよう！

プログラミング

gapはコードがシンプルになって非常にいいのですが一点だけ注意点があります。

それはIE11非対応ということです。

しかしIE11については2022年6月15日でサポートが終了します。

それを考えるとgapの書き方も手駒として持っておいて損はないはずです。

今回の２つの方法を知っていればカード型レイアウトを作る際には困らないのではないでしょうか。

あとgridもぜひ使っていきたいですね。

【display: gridが最強】gridでカード型レイアウトをコーディング！

コメントを残す

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

投稿者 トシ

ホーム > CSS > 【Flexbox】カード型レイアウトを作る２つの方法