デイトラweb制作上級編 DAY31~44④
nakano
卒業制作課題 4日目
PC版
スマホ版
苦戦したところ
横並びのカード
web制作中級編 DAY13 の時と同じ作り方
PCとスマホの時だけでなく、タブレット表示の時も対応できる
PC → 1列で3枚
タブレット → 1列で2枚
スマホ → 1列で1枚
タブレット
<div class="case__items">
<!-- 「case__item」×6 -->
<div class="case__item">
・
・
・
</div>
</div>CSS
.case__items {
display: flex;
flex-wrap: wrap;
}
.case__item {
color: #fff;
width: calc(33.33% - 70px * 2 / 3);
@include mq('pc') {
&:not(:nth-child(3n + 1)) {
margin-left: 70px;
}
&:nth-child(n + 4) {
margin-top: 68px;
}
}
@include mq('tab') {
width: calc(50% - 70px * 1 / 2);
&:not(:nth-child(2n + 1)) {
margin-left: 70px;
}
&:nth-child(n + 3) {
margin-top: 64px;
}
}
@include mq('sp') {
width: 100%;
margin-left: 0;
&:nth-child(n + 2) {
margin-top: 46px;
}
}
}まとめ
今回も卒業制作課題を進めました。
あまり時間が取れなくて満足いくところまで進められませんでしたが、いつもよりは詰まらずできたのかなぁと思います！
デザインカンプの全体を見た感じだとBoostnoteにまとめた過去のコードが結構使えそうなので、思ったよりも早く終わるかもしれません。
