デイトラweb制作中級編 DAY33~37④
nakano
最終課題：実践コーディング 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」を表示する
まとめ
今回も最終課題の続きを進めました。
ここまで進めて個人的にスライダーとコンタクトフォームの作成が本当に大変だと思いました。
特にスライダーは元が自分の作ったものではないため、今はなんとかデザイン通りに作れてほっとしています。
