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

卒業制作課題 3日目

PC版

スマホ版

苦戦したところ

①ループするスライドショーの実装

<div class="swiper__container-pc">
    <div class="swiper infinite-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/img-mv01_pc.png" alt="画像1" /></div>
            <div class="swiper-slide"><img src="./img/img-mv02_pc.png" alt="画像2" /></div>
            <div class="swiper-slide"><img src="./img/img-mv03_pc.png" alt="画像3" /></div>
        </div>
    </div>
</div>
/* コンテナー */
.swiper__container-pc {
    position: relative;

    @include mq('sp') {
        display: none;
    }
}

/* スライダーのwrapper */
.swiper-wrapper {
    transition-timing-function: linear;
}

/* スライド */
.swiper-slide {
    height: 100% !important;
    /* 高さを指定 */
    width: 100% !important;

    img {
        height: 100%;
    }
}
window.addEventListener("DOMContentLoaded", () => {
  const infiniteSlider = new Swiper(".infinite-slider", {
    loop: true,
    slidesPerView: "auto",
    speed: 13000,
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
    },
  });
});

②斜線が入った背景

<section class="about">
    <div class="about__bg">
     ・
     ・
     ・
    </div>
</div>
.about {
    background: linear-gradient(transparent 31%, #EDF3F8 31%);
    transform: skewY(10deg);
}

.about__bg {
    transform: skewY(-10deg);
}

transform: skewY(10deg); で全体を斜めにした後に

transform: skewY(-10deg); で中の要素を元に戻して、背景だけ斜めにする

まとめ

今回も卒業制作課題を進めました。

やっぱり難しい。。。

PC表示はできてもスマホ表示がなかなかうまくできなくて、行っては戻ってを繰り返してました。

反省点はいろいろあるので、しっかり反省して明日以降に活かしたいと思います!

コメントを残す

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