模写修行メディア

Flexboxとネガティブマージンでカード型レイアウトを実装する方法!

カード型レイアウトはwebサイトを作る上でよくあるUIの1つです。

実装方法は色々ありますが、この記事ではFlexboxとネガティブマージンを使った方法を紹介します。

この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。

CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!

実装したいデザイン

実装したいデザイン

このようなレイアウトを実装します。画像は3カラムになっていますが、4カラムまで対応します。

ビューポートカラム
~500px1カラム
500px~800px2カラム
800px~1000px3カラム
1000px~4カラム

デモも作ったので幅を変えて確認してみてください。

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

余白を均等にする方法で1番最初に思い浮かぶのが、justify-content: space-between;ではないでしょうか?

しかし、管理者やユーザーが投稿するコンテンツでは投稿数がいくつになるか分かりません。justify-contentを使った方法では特定条件で不自然なレイアウトになります。

<div class="posts">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>
.posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.posts-item{
    width: 32%;
}

上のコードは、特定条件で不自然なレイアウトになる書き方です。

実装したいデザイン

カラム数のn倍の投稿数がある場合は問題ありません。

実装したいデザイン

カラム数のn倍の投稿数でない場合、不自然なレイアウトになってしまいます。

justify-contentで均等に余白を作る方法は、flex アイテムの個数があらかじめ決まっているものでないと、このような問題が起きます。

nth-childや擬似要素を使う方法について

justify-contentの問題を解決する方法として、nth-childを使う方法や擬似要素を使う方法がありますが、個人的にどちらも少しややこしかったり、不便に感じます。

  • nth-childを多用すると分かりにくくなる
  • 擬似要素を使った方法は4カラム以上で使えない、かつ他で擬似要素を使いたい時に不便

これらが個人的にあまり好きじゃない理由です。

詳しくは解説しないので、興味がある方は調べてみてください。そして今回紹介するネガティブマージンを使った方法と比べてみてください。

ネガティブマージンでカード型レイアウトを実装する方法

<div class="posts">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>
.posts {
    margin-top: -40px;
}

.posts-item {
    padding-top: 40px;
}

@media screen and (min-width: 500px) {
    .posts {
        display: flex;
        flex-wrap: wrap;
        margin: -40px 0 0 -24px;
    }

    .posts-item {
        width: 50%;
        padding: 40px 0 0 24px;
    }
}

@media screen and (min-width: 800px) {
    .posts-item {
        width: 33.33333%;
    }
}

@media screen and (min-width: 1000px) {
    .posts-item {
        width: 25%;
    }
}

カードの上と左の余白はpadding40px24pxに設定しています。ただし、このままだとflexコンテナに接する上側の余白と左側の余白が邪魔です。従って、その邪魔な余白をflexコンテナ側でネガティブマージンを使って相殺しています。

ネガティブマージンのイメージ図

図にするとこのようなイメージです。

posts-itemwidthcalcを使うとIEでカラム落ちする場合があるので、使っていませんが、IE無視で良ければcalcを使った方がより簡単です。


<div class="posts posts--col4">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>

普段はこのように、バリエーションクラスを使って最大カラム数が4の時は、posts--col4を付与するような運用にしています。

背景色を入れることも考慮したコーディング

実装したいデザイン

このようにカードに背景色を入れたい場合もあると思います。前述したやり方では、図のような形になりません。

<div class="posts posts--col4">
    <article class="posts-item">
        <div class="post">...</div>
    </article>
    ...
    <article class="posts-item">
        <div class="post">...</div>
    </article>
</div>
/* 追加 */
.post {
    background-color: #ddd;
    height: 100%;
}

posts-itemの中にpostを作って、postに対して背景や余白をつけると思い通りになります。height: 100%;がないとコンテンツによってカードの高さがバラバラに見えてしまうので入れています。

gapを使っても実装可能!

2021/4/26のSafari / iOS のアップデートで、Flexboxで使用するgapプロパティがSafariでも使えるようになりました。IE対応が必要ない場合はgapプロパティを使っても実装できます。

<div class="posts">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>
.posts {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 24px;
}

.posts-item {
    width: 100%;
}

@media screen and (min-width: 500px) {
    .posts-item {
        width: calc((100% - (24px * 1)) / 2);
    }
}

@media screen and (min-width: 800px) {
    .posts-item {
        width: calc((100% - (24px * 2)) / 3);
    }
}

@media screen and (min-width: 1000px) {
    .posts-item {
        width: calc((100% - (24px * 3)) / 4);
    }
}

これだけです。

他にも関連の記事を上げています!

CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!

レイアウトを作るにはFlexboxの理解が必須です。基礎を学びたい方は上の記事をご覧ください。

【CSS Grid入門】図解も交えて使い方を詳しく解説!

Flexboxでもレイアウトは作れますが、デザインによってはCSS Gridの方が適している場合もあります。CSS Gridの使い方は上の記事をご覧ください。

特に今回紹介したカード型レイアウトは、CSS Gridの方がスッキリかけます。CSS Gridが使える環境では、CSS Gridを使うことをおすすめします。


この記事のように、知っておくと良い、Flexbox関連のお悩み解決系の記事も多数あげています。

Flexboxで均等幅(同じサイズ)で横並び配置する方法!Flexboxで最後の1つだけ右寄せや下寄せにする方法!Flexboxで画像や要素が小さくなる(潰れる)時の対処方法!Flexboxで画像が縦に伸びる(比率がおかしい)時の対処方法!

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材