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

最終課題:実践コーディング 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日目にしてようやく全体ができてきた気がします。

あとはコンタクトのコーディング、レスポンシブ対応、アニメーションの追加だけなので引き続き頑張りたいと思います!

コメントを残す

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