初めに
学習した内容をもとに矢印ボタン（">"や"<")をsassで作成してみました。
※内容に間違いなどがある場合はご指摘をよろしくお願いします。
やりたいこと
①「<」や「>」の形をした矢印ボタンをcssで作る
②マウスを当てると右や左にずれるアニメーションも付ける
完成形のイメージ
htmlで箱を用意する
arrow_buttonsの中に矢印ボタンを配置するarrow_buttons__prevとarrow_buttons_next要素を用意します。
<body>
<section class="buttons">
<div class="arrow_buttons">
<div class="arrow_buttons__prev"></div> <!-- "<"の矢印ボタン -->
<div class="arrow_buttons__next"></div> <!-- ">"の矢印ボタン -->
</div>
</section>
</body>
SassでBoxと矢印ボタンを作成
①矢印ボタンを配置させるために必要な箱を作る
幅200px,高さ50px、ボーダーラインが赤色の箱を作ります。矢印ボタンはこの箱の中に配置させたいので、positionをrelativeにし、この箱を基準に矢印の位置を調整するようにします。
.arrow_buttons {
box-sizing: border-box;
width: 200px;
height: 50px;
border: 1px red solid;
position: relative;
}
②矢印ボタンを押せる領域となる箱の作成（ボタンを押しやすくするため）
左と右矢印ボタンを押せるエリアを箱の形で指定します。それぞれ幅と高さを30pxにしました。また、親要素であるarrow_buttonsのpositionがrelativeに指定されているため、こちらの箱にそれぞれpositionをabsoluteに指定し、親要素（arrow_buttons)からの相対位置をtop、left、rightで決めます。
.arrow_buttons__prev {
position: absolute;
top: 8px;
right: 110px;
cursor: pointer;
width: 30px;
height: 30px;
}
.arrow_buttons__next {
position: absolute;
top: 8px;
left: 110px;
cursor: pointer;
width: 30px;
height: 30px;
}
③矢印ボタンを作成ー"ㄱ"の形を作る
arrow_buttonsの前に中身が空の擬似要素を作ります。この要素は箱の形にしているので、幅と高さを15pxに指定します。それから上と右に灰色のボーダーラインを引きます。positionをabsoluteにして、topとleftで位置調整をします。
.arrow_buttons {
box-sizing: border-box;
width: 200px;
height: 50px;
border: 1px red solid;
position: relative;
&::before {
content: "";
display: block;
width: 15px;
height: 15px;
position: absolute;
top: 40%;
left: 10px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
}
④"ㄱ"を回転させる
"<"の形にするために回転させます。時計まわりに225度回転させます。
.arrow_buttons {
box-sizing: border-box;
width: 200px;
height: 50px;
border: 1px red solid;
position: relative;
&::before {
content: "";
display: block;
width: 15px;
height: 15px;
position: absolute;
top: 40%;
left: 10px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(225deg); //追記
}
}
矢印の形になりました。
⑤マウスを当てた時のanimation効果を作る
マウスを当てた時に矢印ボタンを左に動くようにしたいので、擬似要素（:hover)のtransformプロパティにtranslateXを-10pxを指定します。また、このアニメーション効果が0.2秒間行われるようにしたいので、transition-durationプロパティを0.2sにします。
&__prev {
position: absolute;
top: 8px;
right: 110px;
cursor: pointer;
width: 30px;
height: 30px;
&::before {
content: "";
display: block;
width: 15px;
height: 15px;
position: absolute;
top: 40%;
left: 10px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(225deg);
}
//追記
&:hover {
transition-duration: 0.2s;
transform: translateX(-10px);
}
}
同じ要領で右の矢印ボタンも作成します。ここまでの完成形は以下の通りです。
.arrow_buttons {
box-sizing: border-box;
width: 200px;
height: 50px;
border: 1px red solid;
position: relative;
&__prev {
position: absolute;
top: 8px;
right: 110px;
cursor: pointer;
width: 30px;
height: 30px;
&:hover {
transition-duration: 0.2s;
transform: translateX(-10px);
}
&::before {
content: "";
display: block;
width: 15px;
height: 15px;
position: absolute;
top: 40%;
left: 10px;
margin-top: -2.5px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(225deg);
}
}
&__next {
position: absolute;
top: 8px;
left: 110px;
cursor: pointer;
color: lightgray;
width: 30px;
height: 30px;
&:hover {
transition-duration: 0.2s;
transform: translateX(10px);
}
&::after {
content: "";
display: block;
width: 15px;
height: 15px;
position: absolute;
top: 40%;
right: 10px;
margin-top: -2.5px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(45deg);
}
}
}
⑥@mixinを使ってまとめてみる。
@mixin leftArrowButton {
&__prev {
position: absolute;
top: 8px;
right: 110px;
cursor: pointer;
width: 30px;
height: 30px;
&:hover {
transition-duration: 0.2s;
transform: translateX(-10px);
}
&::before {
content: "";
display: block;
width: 15px;
height: 15px;
position: absolute;
top: 40%;
left: 10px;
margin-top: -2.5px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(225deg);
}
}
}
@mixin rightArrowButton {
&__next {
position: absolute;
top: 8px;
left: 110px;
cursor: pointer;
color: lightgray;
width: 30px;
height: 30px;
&:hover {
transition-duration: 0.2s;
transform: translateX(10px);
}
&::after {
content: "";
display: block;
width: 15px;
height: 15px;
position: absolute;
top: 40%;
right: 10px;
margin-top: -2.5px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(45deg);
}
}
}
.arrow_buttons {
box-sizing: border-box;
width: 200px;
height: 50px;
border: 1px red solid;
position: relative;
@include leftArrowButton;
@include rightArrowButton;
}
参考サイト
↧