スキップしてメイン コンテンツに移動

些細な日常

サイトに戻るボタンをフローティング(固定)と四角や角丸/正方形や真ん丸の中揃えで設置する方法

サイトのコンテンツが縦に長くなる場合にページの下段から上段へ移動する戻るボタンを設置すると便利だと思う。方法もリンクと考え方が共通だからサイト作成に慣れていれば初歩的なマークアップで済むのが容易い。微妙に違うのはリンク先がサイトアドレスのURLではなくてコンテンツの目次のジャンプリンクの場合と変わらず、同一ページに置かれたどこかのHTMLタグのidでなくてはならない。なので記載するのはリンク元の戻るボタンのaタグに加えてリンク先のidの二ヵ所に増えている。

戻るボタンのサンプル

リンク先

<h1 id="header">タイトル</h1>

リンク元

<a href="#header">↑</a>

戻るボタン

(ブログ名へ飛ぶ)

リンク先はh1などのコンテンツのHTMLタグにidを付け加えておく。リンク元はリンクのaタグを使ってhrefに半角シャープ(#)とidを指定する。

サイトで戻るボタンと反対に上段から下段へ送るボタンを設置する場合でも同一ページのidへ向けてリンクを貼る方法は全く同じだ。

戻るボタンのフローティングについて

ブラウザの画面にフローティングで固定して戻るボタンを表示するとサイトの閲覧中にいつでも押せるから非常に便利だと思う。

リンク元のHTMLタグにデザインのCSSでpositionのfixedを指定して位置取りをtopかbottomかrightかleft(上か下か右か左)を使って決めるだけだからさほど難しくない。

フローティングの戻るボタンのサンプル

リンク元のHTML

<a class="return" href="#header">↑</a>

フローティングのCSS

.return {position:fixed;right:2em;bottom:2em;}

戻るボタンの↑のリンクが画面の右から二文字分と下から二文字分の位置にフローティングで固定して表示される。

注意:Googleアドセンスなどで収益化を図っているサイトでは戻るボタンがサイト広告に重なるデザインになると不正クリックを引き起こし兼ねなくてポリシー(規約)違反として最悪の場合は収益化のライセンスを失効するかも知れないからフローティングは推奨されない。

四角の戻るボタンのサンプル

CSSのborderで枠線、background-colorかbackgroundで背景色を付けられる。

戻るボタンのHTML

<a class="return" href="#header">↑</a>

四角の枠線と背景色のCSS

.return {border:1px #2196f3 solid ;background-color:#ffffe0;}

四角の戻るボタン

(ブログ名へ飛ぶ)

角丸の戻るボタンのサンプル

CSSは枠線と背景色は四角と同じで、さらにborder-radiusの50%を記載すると角が取れて丸くなる。

戻るボタンのHTML

<a class="return" href="#header">↑</a>

角丸の枠線と背景色のCSS

.return {border:1px #2196f3 solid;background-color:#ffffe0;border-radius:50%;}

角丸の戻るボタン

(ブログ名へ飛ぶ)

CSSのborder-radiusの値によって角丸の度合いが変更できて50%よりも小さく指定すれば丸みが下がって四角に近付く。

正方形や真ん丸の戻るボタンについて

戻るボタンの四角や角丸はそのままだと内容/リンク元の文字によって大きさが決まっている。変更する場合は画像を使っても良いけれどもCSSでは四角や門丸の戻るボタンにwidthとheightで縦横の長さを指定すると大丈夫なんだ。

CSSで戻るボタンの縦横の長さを同じに指定すると四角は正方形に、角丸は真ん丸のデザインになる。

ただし縦横を指定したボックスに文字を入れる際には位置取りがずれて中心に来なくなるので、displayのflexかinline-flexも記載して――デザインで前者は一列として、後者は一列の要素として扱われる。他のコンテンツを両側に含めない場合はflex、含める場合はinline-flexを使う――ボックスの内側の文字の位置取りをjustify-contentのcenterとalign-itemsのcenterで横の中揃えと縦の中揃えに調節しなくてはならない。

正方形の中揃えの戻るボタンのサンプル

戻るボタンのHTML

<a class="return-button" href="#header">↑</a>

正方形と中揃えのCSS

.return-button {width:1.5em;height:1.5em;display:inline-flex;justify-content:center;align-items:center;border:1px #2196f3 solid;background-color:#ffffe0;}

正方形の中揃えの戻るボタン

(ブログ名へ飛ぶ)

真ん丸の中揃えの戻るボタンのサンプル

戻るボタンのHTML

<a class="return-button" href="#header">↑</a>

真ん丸と中揃えのCSS

.return-button {width:1.5em;height:1.5em;display:inline-flex;justify-content:center;align-items:center;border:1px #2196f3 solid ;background-color:#ffffe0;border-radius:50%;}

真ん丸の中揃えの戻るボタン

(ブログ名へ飛ぶ)

戻るボタンで良く使われる他のデザイン

CSSを幾つも組み合わせて戻るボタンを細かくカスタマイズできる。フローティング(固定)に四角や角丸を追加できたり、通常の場合も含めて戻るボタンで良く使われる他のデザインのCSSを取り上げておきたい。

太字

font-weight:bold

大きな文字サイズ

font-size:large

※特大はx-large、超特大はxx-largeなど、値で変更可。

中寄せ/右寄せ

戻るボタンを囲ったdivなどに指定する。

中寄せ
text-align:center
右寄せ
text-align:right

※フローティングの場合は必要ない。

リンクの下線なし

text-decoration:none

背景色の透過

background-color:rgba(入力値)

または

background:rgba(入力値)

CSSは色コードにrgbという三分割のタイプを原色大事典などで調べて使うと透過率を変えてデザインできる。例えば灰色で半分透過するには背景色の値はrgba(128, 128, 128, 0.5)と半角のコンマ(,)で区切りながら四つの値を入力する。最後の数字が透過率を示していて透過なしの「1」から完全に透過の「0」までの値を入力すると裏側のコンテンツも見えるようになる。

関連ページ
参考サイト
  • ブログの投稿者: 結城永人
  • タイトル: サイトに戻るボタンをフローティング(固定)と四角や角丸/正方形や真ん丸の中揃えで設置する方法
  • 最終更新: 

コメント

最近の投稿

日付: 

Bardの事実認識の2023年9月の更新の実力の確認

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...