ページトップに戻るボタンの作り方

2022年8月15日2022年8月16日

ページトップに戻るボタンの作り方の備忘録。

概要

Font Awesomeを使ってページトップに戻るボタンを作る。

手順

1.htmlのheadに下記を貼付け（Font Awesomeを使う為の準備）

<link href="https://use.fontawesome.com/releases/v6.1.2/css/all.css" rel="stylesheet">
</head>

2.htmlのfooterに下記を貼付け

<div id="gotop">
    <a href="#">
        <i class="fas fa-long-arrow-alt-up"></i>
    </a>
</div>

（注）青下線部分は使いたいアイコンで変わる

3.CSSに下記貼付け

#gotop a {
	display: block;
	position: fixed;
	right: 50px;
	bottom: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
	background-color: whitesmoke;
	box-shadow: 2px 2px 3px #000;
}

display: block;＝表示形式をブロック要素にする
position: fixed;＝位置を絶対位置に指定（固定）
right: 50px;＝ウィンドウの右から50pxの位置
bottom: 50px;＝ウィンドウの下から50pxの位置
width: 50px;＝ボタンの幅
line-height: 50px;＝ボタンの高さ(行間設定)
text-align: center;＝中央揃え
border-radius: 50%;＝ボタンの丸み
background-color: whitesmoke;＝ボタン内の背景色
box-shadow: 2px 2px 3px #000＝ボタンの影設定

参考サイト等

Font Awesomeに関しての参考サイト↓
https://blog.codecamp.jp/font-awesome-icon

Font Awesome↓
https://fontawesome.com/