模写修行メディア

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

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

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

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

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

💡 コーディングの練習なら模写修行!

無料教材もあります!

【学べること】

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい
公式サイトを見る
コーディング教材の【模写修行】は他の教材と何が違うのか?

この記事の目次

実装したいデザイン

実装したいデザイン

このようなレイアウトを実装します。画像は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で画像が縦に伸びる(比率がおかしい)時の対処方法!

超実務向け!コーディングの練習が出来るサービス作りました 🎉

模写修行

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ!

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 何を考えながらコードを書くのか知りたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい

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

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか?

無料教材もあります!👍

模写修行を見る

脱初心者!自信を持ってプロと言えるスキルを!

嬉しい声もいただいています!

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました!
TwitterでDMいただきました!🙇

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです!解説記事もわかりやすい...!
Tweet

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

無料教材もあります!👍

模写修行を見る

脱初心者!自信を持ってプロと言えるスキルを!

オススメweb制作の学習サイト17選!

👉詳しく見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

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

\Share/

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

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