矢印をCSSだけで作る方法！「ページトップへ戻る」などのボタンに最適！

スクロールすると右下の方に、「PAGE TOP」などのボタンが現れて、クリックするとサイトの一番上に戻る、みたいなボタンは見たことがあると思います。

今回はそのボタンを作るにあたって「PAGE TOP」などのテキストではなく、CSSだけで矢印を作り、ちょっとオシャレにアレンジする方法を解説したいと思います。

解説はあくまでCSSで矢印を作る方法に限りますので、どうやってスクロールしたらボタンが現れて・・・クリックしたらページの先頭に戻る、なんてことができるの？？と思った方は下記のサイトがわかりやすいので参考にして見てください。

スクロールでtopへ戻るボタンを表示するjQueryコード（スムーススクロール）

1　まずは要素を準備

<div id="back-top">

<span class="arrow"></span>

</div>

<span>要素の部分が矢印になります。何度も言いますが、矢印はCSSで作りますので、空で問題ありません。

2　CSSで矢印を作る

①矢印の準備

#back-top {

position: relative;

width: 55px;

height: 55px;

background-color: #665e53;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px

}

.arrow {

position: absolute;

width: 15px;

height: 15px;

border: 5px solid #665e53;

border-left-color: #FFF;

border-top-color: #FFF

}

上記のコードを記述するとこんな感じになるはずです。

ポイントは、親要素の<div>のpositionプロパティの値を「relative」、子要素<span>のpositionプロパティの値を「absolute」にし、<span>の位置の基点を<div>にしている点です。こうすることで、親を基点に矢印の位置を上からこのくらい、左からこのくらい、と調整が楽にできるんですね。

また、borderのカラーを親要素と同じカラーにし、矢印部分の色だけを変えることで、矢印を表現します。

②位置を調整、回転させて完成！

.arrow {

position: absolute;

width: 15px;

height: 15px;

border: 5px solid #665e53;

border-left-color: #FFF;

border-top-color: #FFF;

top: 20px;

left: 15px;

transform: rotate(45deg);

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform: rotate(45deg);

-ms-transform: rotate(45deg)

}

最後に、transformプロパティのrotate()で要素を回転(45度回転)させ、top、leftで位置を調整して完成です。

完成イメージはこちら。rotate()の角度を変えれば、左右の矢印も作れますので、必要な方はチャレンジしてみてください。

他にも疑似要素を使って矢印を作る方法もあります。下記のサイトが参考になるので、紹介しておきます。
スマホ用サイトに便利！ リンクを表す矢印をCSSだけで作る方法