結城永人サイトのコンテンツが縦に長くなる場合にページの下段から上段へ移動する戻るボタンを設置すると便利だと思う。方法もリンクと考え方が共通だからサイト作成に慣れていれば初歩的なマークアップで済むのが容易い。微妙に違うのはリンク先がサイトアドレスの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」までの値を入力すると裏側のコンテンツも見えるようになる。
コメント