デイトラweb制作中級編 DAY33~37④

最終課題:実践コーディング 4日目

今回進めた範囲(PC) ↓

今回進めた範囲(レスポンシブ) ↓

苦戦したところ

①カルーセルスライダーのレスポンシブ

→ web制作中級編 DAY33~37③ で作成したコードに付け足す(SCSSとJQuery)

SCSS

レスポンシブ時に画像のサイズを変更する

.swiper-slide {
    width: 400px;

    @include mq('sp') {
        width: 274px;
    }
}

jQuery

レスポンシブ時に画像同士の距離を40px→20pxに変更する

const swiper = new Swiper('.swiper', {
    loop: true,

    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    // ここから書き直す ↓
    slidesPerView: 'auto',
    spaceBetween: 20,

    breakpoints: {
        // スライドの表示枚数:768px以上の場合
        768: {
            spaceBetween: 40,
        }
    }
});

※「slidesPerView」は何枚のスライドを表示するか、「spaceBetween」はスライド同士の距離間(単位はpx)

// レスポンシブ用
slidesPerView: 'auto',
spaceBetween: 20,


breakpoints: {
   
// PC用
    768: {
        spaceBetween: 40,
    }

}

②Google Mapsのボタン位置

PC時

<section class="access">
            <div class="access__inner">
                <div class="access__content">
                    <div class="access__left">
                        <div class="access__head section-title">Access</div>
                        <div class="access__address">〒106-6126 <br>東京都港区六本木 6丁目 <br>10-1 六本木ヒルズ森タワー</div>
                        <div class="access__button1"><a href="#">Google Maps</a></div>
                    </div>
                    <div class="access__right">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.6714145963856!2d139.72708991518877!3d35.66046643871796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b7708fe1bcd%3A0xf0b2a3bc402345f2!2z44CSMTA2LTAwMzIg5p2x5Lqs6YO95riv5Yy65YWt5pys5pyo77yW5LiB55uu77yR77yQIOWFreacrOacqOODkuODq-OCuuajruOCv-ODr-ODvA!5e0!3m2!1sja!2sjp!4v1552842842226"
                            allowfullscreen></iframe>
                    </div>
                </div>
                <div class="access__button2"><a href="#">Google Maps</a></div>
            </div>
        </section>

「access__button2」をdisplay: none;にして

access__button1」を表示する

レスポンシブ時

「access__button1」をdisplay: none;にして

access__button2」を表示する

まとめ

今回も最終課題の続きを進めました。

ここまで進めて個人的にスライダーとコンタクトフォームの作成が本当に大変だと思いました。

特にスライダーは元が自分の作ったものではないため、今はなんとかデザイン通りに作れてほっとしています。

コメントを残す

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