マージンノート — ページトップボタン
ページ余白に置く短い罫線とセリフ体の文字。編集記事になじむ左下配置のページトップリンク。
PRACTICAL WEB TIPS
ページトップボタンのデザイン
Webサイトの先頭へ戻る48種類のボタン。デザインを見比べ、スクロール・ホバー・クリックを試して、HTML・CSS・JavaScriptを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：用途: navigation
60 items条件に一致する公開素材
ファインレール — ページトップボタン
縦長の細いレールに矢印と文字を整えた、建築・設計サイト向けのページトップボタン。
シグナルディスク — ページトップボタン
円形を潔く使った視認性の高いページトップボタン。小さなラベルと矢印の比率を調整。
シビックタイル — ページトップボタン
矢印と文字を分けた実用的なタイル型。押しやすさと視認性を優先したページトップボタン。
リビールエッジ — ページトップボタン
画面右端に沿うタブが、ホバーやフォーカスで横方向へ開くページトップボタン。
コーナーブラケット — ページトップボタン
コーナー線をモチーフにした、工業的で簡潔なページトップボタン。
ドック・リターン — ページトップボタン
画面下中央に配置する横長のナビゲーション型ページトップボタン。
フッター・ハンドオフ — ページトップボタン
フッターの一部として自然に置く横長のページトップリンク。固定フローティングボタンではありません。
エブリデイピル — ページトップボタン
短いラベルと矢印を組み合わせた、押しやすく自然なピル型のページトップボタン。
リーディングリング — ページトップボタン
スクロール進捗を円周で示すページトップボタン。実際の読了位置に合わせて表示が変わります。
レタープレスタブ — ページトップボタン
文字組みと縦長の輪郭を活かした、画面端に沿うページトップタブ。
カットマーク — ページトップボタン
角を切り落とした小さなタイルに明快な上矢印を収めたページトップボタン。
SIDE NOTE — Back to Top
小さな縦組の文字と太めの短い罫線。細すぎる線にはせず、静かな存在感を保つ。
SOFT SQUARE — Back to Top
穏やかなクリーム色の角丸正方形に、読みやすい濃色矢印と小さなTOP。
TYPOGRAPHIC 00 — Back to Top
「最初へ戻る」を00という数字と短い英語で示す。文字の余白とウェイトを主役にする。
INK DISC — Back to Top
56pxの濃色円に、上向きのサインをはっきり置く。ページより強く主張しないが、確実に見つかる。
ORBIT MARK — Back to Top
円周の一部を切り取ったやや太めの円弧。中心の小さなTOPが読める大きさ。
LITTLE BALLOON — Back to Top
小さな風船のアクセント。文字は風船の中に置き、絵は主役になりすぎないサイズ。