CSS ページトップへ戻るボタン デザインテンプレート

クリックするとページ上部へ戻るボタンのCSSサンプルを紹介します。

企業サイト向け

企業サイトで使えそうな真面目系の矢印を使用。

See the Pen
PagetopButton by kura (@kuranopen)
on CodePen.

• CSSのみ
• レスポンシブ対応

ブログ向け

円の形をしたブログ向けのボタン。

See the Pen
VwmxRZZ by kura (@kuranopen)
on CodePen.

• fontawesomeを使用
• レスポンシブ対応

外部ファイル

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選