カード型レイアウトはwebサイトを作る上でよくあるUIの1つです。
実装方法は色々ありますが、この記事ではFlexboxとネガティブマージンを使った方法を紹介します。
この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。
CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!💡 コーディングの練習なら模写修行!
この記事の目次
実装したいデザイン
このようなレイアウトを実装します。画像は3カラムになっていますが、4カラムまで対応します。
ビューポート | カラム |
---|---|
~500px | 1カラム |
500px~800px | 2カラム |
800px~1000px | 3カラム |
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%;
}
}
カードの上と左の余白はpadding
で40px
と24px
に設定しています。ただし、このままだとflexコンテナに接する上側の余白と左側の余白が邪魔です。従って、その邪魔な余白をflexコンテナ側でネガティブマージンを使って相殺しています。
図にするとこのようなイメージです。
posts-item
のwidth
はcalc
を使うと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