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

卒業制作課題 2日目

苦戦したところ

①少し変わったmoreボタンの書き方

②レスポンシブ時のボタンの位置
→ 中級編最終課題のGoogle Maps ボタンの時と同じ

HTML

<div class="about__link-pc">
    <a href="#">
        <div class="about__more font-en">View more</div>
        <div class="about__button">
            <div class="about__arrow"></div>
        </div>
    </a>
</div>

SCSS

.about__link-pc {
    margin-left: auto;

    a {
        display: flex;
    }
}

.about__more {
    font-size: 32px;
    color: #fff;
    position: relative;
    margin-right: 89px;
}

.about__button {
    position: relative;
    width: 51px;
    height: 51px;

    // 黄色の円
    &::after {
        position: absolute;
        content: "";
        right: 0;
        top: -5px;
        width: 51px;
        height: 51px;
        border: 3px solid #FFF400;
        border-radius: 50%;
    }
}

// 矢印
.about__arrow {
    position: relative;

    &::before {
        position: absolute;
        content: "";
        width: 94.5px;
        top: 25px;
        right: 25px;
        border-bottom: 2px solid #fff;
    }

    &::after {
        position: absolute;
        content: "";
        width: 14px;
        height: 2px;
        top: 20px;
        transform: rotate(38deg
        );
    right: 25px;
    border-bottom: 2px solid #fff;
}
}

まとめ

今日から本格的に卒業制作課題を進めました。

中級最終課題の時に比べるとこちらの方がページの量も多く、パッと見てすぐにはコーディングできないようなデザインもあってとても進めにくいです。

目標は2週間以内の完成ですが、このペースだとあやしいかもなあ。。。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です