

そんな疑問にお答えします。
画像や四角形の要素がきれいに並んだレイアウトを「カード型レイアウト」と呼びます。
このようなものですね。
何かの一覧ページであったり、画像ギャラリーページだったりと目にする機会は多いです。
ブログで投稿記事一覧がこのカード型レイアウトのケースもよく見かけると思います。
ですのでWeb制作者としてはこのレイアウトの作り方はマストで覚えておかなければなりません。
とはいっても一度覚えてしまえばその後は使い回すことで簡単に実装できます。
その作り方を一緒に見ていきましょう。
目次
カード型レイアウトの作り方
今回はFlexboxを使った2種類の方法を紹介します。
-
「nth-child」を使う方法
- 「gap」を使う方法
space-betweenを使う方法の問題点
本題に入る前に「justify-content: space-between;」についてふれておきます。
横並びで余白も均等にする場合、最初に思い浮かぶのが「justify-content: space-between;」だと思います。
確かにこれはすごく使い勝手がよく、実際使う機会は多いです。
ですがひとつ注意しておかなければいけない点があります。
それはブログの投稿記事のようなケースで左詰めにしたいという場合です。
左から順番に詰めていきたいのに「justify-content: space-between;」だと両端基準の左右配置になってしまいます。
これだとまずいわけです。
左から順番に詰めて並べたい場合は「justify-content: space-between;」ではなく今回紹介する方法で配置する必要があります。
「nth-child」を使う方法
コード表示
先に全コードを貼っておきます。
あとで解説します。
<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;
}
ここでのポイントは2つあります。
1つ目のポイントは 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;
}
もう1つのポイントは3列目のカードを 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;
}
}
「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の指定はいらなくなりました。
nth-childを書く必要がなくなるとコードもかなりスッキリしました。
レスポンシブも楽ですね。
まとめ:いろんな書き方を試してみよう!
gapはコードがシンプルになって非常にいいのですが一点だけ注意点があります。
それはIE11非対応ということです。
しかしIE11については2022年6月15日でサポートが終了します。
それを考えるとgapの書き方も手駒として持っておいて損はないはずです。
今回の2つの方法を知っていればカード型レイアウトを作る際には困らないのではないでしょうか。
あとgridもぜひ使っていきたいですね。
【display: gridが最強】gridでカード型レイアウトをコーディング!
投稿者 トシ
コメントを残す