1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ページトップボタン

Posted at

以下のようなページトップボタン(ページの右下当たりにあって、クリックすると一番上に戻ってくるやつ)を実装します。

image.png

まず、ボタンを置きたいhtmlに以下をコピペ

index.html.erb(など)
<p id="pagetop"><a href="#">↑ </a></p>

これがページトップの指令になります。

次に以下を該当cssファイルにコピペしましょう。

tweets.css
/*ページトップ設定*/
#pagetop {
  margin-right: 10px;
	clear: both;
	padding-bottom: 40px;
}
#pagetop a {
	color: #FFF;		/*文字色*/
	font-size: 20px;	/*文字サイズ*/
	background: grey;	/*背景色*/
	text-decoration: none;
	text-align: center;
	display: block;
	float: right;
	border-radius: 30px;	/*角丸のサイズ*/
	width: 50px;
	line-height: 50px;
}

良い感じになるかと思います!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?