デイトラweb制作中級編 DAY33~37③
nakano
最終課題：実践コーディング 3日目
今回進めた範囲（PC） ↓
※コンタクト以外は完成！
苦戦したところ
①カルーセルスライダーの作成
中級編 DAY23 で作ったカルーセルスライダーをもとに作成
HTML
<section class="result">
<div class="result__inner">
<div class="result__head section-title">Results</div>
<div class="swiper">
<div class="swiper-wrapper">
<!-- ここから -->
<div class="swiper-slide">
<div class="result__item">
<a href="#">
<div class="result__image"><img src="./img/slide1.png" alt=""></div>
<div class="result__text">
<div class="result__title">とかくに人の世は住みにくい。</div>
<div class="result__lead">どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</div>
</div>
</a>
</div>
</div>
<!-- ここまで6セット -->
</div>
<div class="swiper-pagination"></div>
</div>
<div class="result__button"><a href="#">VIEW ALL</a></div>
</div>
</section>SCSS
「Swiper」のクラスを上書き ↓
.swiper-slide {
width: 400px;
}
// ボタンの位置
.swiper-pagination {
position: static;
text-align: left;
margin-top: 40px;
}
// ボタンの大きさなど
.swiper-pagination-bullet {
width: 12px;
height: 12px;
background: #FFFFFF;
opacity: 1;
@include mq('sp') {
width: 11px;
height: 11px;
}
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
&:not(:first-child) {
margin-left: 16px;
}
}
//クリックされた時の外側の〇
.swiper-pagination-bullet-active {
position: relative;
&::before {
content:"";
position: absolute;
top: -4px;
left: -4px;
width: 20px;
height: 20px;
border: 1px solid #FFFFFF;
border-radius: 50%;
}
}jQuery
const swiper = new Swiper('.swiper', {
// Optional parameters
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true
},
// 何枚のスライドを表示するか
slidesPerView: 'auto',
// スライド同士の距離間（単位はpx）
spaceBetween: 40,
});②黒背景の位置
全然うまくできなかったのでカンニング。。。
HTML
<div class="bg-wrapper">
<!-- ここから -->
<section class="comments">
・
・
・
</section>
<section class="qa">
・
・
・
</section>
<section class="access">
・
・
・
</section>
<!-- ここまで囲む -->
</div>SCSS
.bg-wrapper {
position: relative;
&:before {
content: '';
position: absolute;
top: 294px;
bottom: 136px;
left: 0;
background: #3e3e3e;
display: block;
width: 980 / 1280 * 100%;
}
}疑似要素を使って黒背景の位置と重なりの順序を決める
→ そのままだと黒背景でほかのセクションが見えなくなるため、セクションを囲んでいるタグに
position: relative;
z-index: 1;
を付ける
まとめ
今回も最終課題の続きを進めました。
3日目にしてようやく全体ができてきた気がします。
あとはコンタクトのコーディング、レスポンシブ対応、アニメーションの追加だけなので引き続き頑張りたいと思います！
