デイトラweb制作上級編 DAY31~44②
nakano
卒業制作課題 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週間以内の完成ですが、このペースだとあやしいかもなあ。。。
