デイトラweb制作上級編  DAY31~44④

卒業制作課題 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にまとめた過去のコードが結構使えそうなので、思ったよりも早く終わるかもしれません。

コメントを残す

メールアドレスが公開されることはありません。