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

卒業制作課題 5日目
PC版

スマホ版

苦戦したところ
ホバー時のボタン
→ ルールセットの指示に従って作成
①「View more」の矢印

<a href="#" class="head__link">
<div class="head__more">View more</div>
<div class="head__button">
<div class="head__arrow"></div>
</div>
</a>
.head__link {
&:hover .head__arrow::before {
width: 145.53px;
right: -26.03px;
}
&:hover .head__arrow::after {
right: -26.03px;
}
&:hover .head__arrow-another::before {
width: 145.53px;
right: -26.03px;
}
&:hover .head__arrow-another::after {
right: -26.03px;
}
}
// 矢印
.head__arrow {
position: relative;
&::before {
position: absolute;
content: "";
width: 94.5px;
top: 25px;
right: 25px;
border-bottom: 2px solid #fff;
transition: all 0.3s ease 0s;
@include mq('sp') {
width: 64.5px;
top: 20px;
right: 20px;
}
}
&::after {
position: absolute;
content: "";
width: 14px;
height: 2px;
top: 20px;
transform: rotate(38deg);
right: 25px;
border-bottom: 2px solid #fff;
transition: all 0.3s ease 0s;
@include mq('sp') {
top: 15px;
right: 20px;
}
}
}
②矢印アイコンが右に曲がる + 右にズレる

<div class="case__item">
<a href="#">
<div class="case__image"><img src="./img/img-case05.png" alt=""></div>
<div class="case__name">EEE株式会社 様</div>
<div class="case__item-under">
<div class="case__square">ビジネス留学プログラム</div>
<div class="case__item-button"></div>
</div>
</a>
</div>
.case__item {
a {
&:hover .case__item-button::before {
right: 0;
border-color: #FFF400;
}
&:hover .case__item-button::after {
right:11px;
border-color: #FFF400;
}
}
}
.case__item-button {
position: relative;
margin-left: auto;
&::before {
position: absolute;
content: "";
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 29.25px;
height: 29.25px;
border: 3px solid #fff;
border-radius: 50%;
transition: all 0.3s ease 0s;
@include mq('sp') {
right: 0;
}
}
&::after {
position: absolute;
content: "";
right: 19px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
width: 11px;
height: 11px;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
transition: all 0.3s ease 0s;
@include mq('sp') {
right: 11px;
}
}
}
まとめ
今回も卒業制作課題を進めました。
ようやくトップページが作り終わりました!
作成するのに5日もかかってしまって正直かなり焦っています。。。