↑トップへ

スポンサーリンク
スポンサーリンク
2015年07月17日

CSSを使った「ページトップに戻るボタン」の実装

gototopbutton.gif


みなさんこんにちは。
先日も紹介したドットインストールにてCSSとCSS3の学習を終えたので、復習を兼ねてかねてより作りたかった「ページトップへ戻る」ボタンを実装しました。
※注:なめらかにスクロールとかしません


お使いのブラウザの右下あたりにあるやつがそれです。
中途半端に高めの位置にあるのは、スマホで閲覧したときにseesaaのオーバーレイ広告がかぶってしまってタッチできないという不具合が生じたためです。ほんと邪魔


ちなみに私のブログはPCの表示をレスポンシブ化させてスマホユーザーもこちらに飛ばしているので、そうしてないseesaaユーザーの方はまた違ってくるかもしれません。
レスポンシブ化については以前書いたこちらの記事を参照してみてください。
Seesaaブログをレスポンシブ化するために参考になる記事と方法まとめ: 在宅ワークで生計を立てたい


さて、今回作成したボタン、雑なつくりではありますが、一応ページトップに戻ることはできます。
PCからの方、ぜひマウスオーバーしてみてください。ぴよぴよ動きますよ。
スマホでも触れば動くのですが、:hoverに設定しているのでうまく動かないかもしれません。笑


使用しているコード


こちらです。


HTML

<div id="gototop"><a href="#banner">↑トップへ</a></div>

適当に<div id="banner"></div>の下あたりに記載しました。


CSS

/* トップに戻るボタン */
div#gototop {
width: 80px;
height: 25px;
text-align: center;
border: 1px solid silver;
background-image: linear-gradient(#ffffff, #9C683A);
border-radius: 5px;
position: fixed;
bottom: 70px;
right: 10px;
}
div#gototop:hover {
-webkit-animation-name: gototop;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: .1s;
}

@-webkit-keyframes gototop {
0% {
}
20% {
margin-bottom: 20px;
}
50% {
margin-bottom: 0px;
}
70% {
margin-bottom: 10px
}
100% {
margin-bottom: 0px;
}
}

div#gototop a {
text-decoration: none;
line-height: 25px;
color: white;
}

以下、解説を入れます。


コードの解説


では解説です。まずHTML。


<div id="gototop"><a href="#banner">↑トップへ</a></div>

<a href="#banner">でseesaaのHTMLにあった<div id="banner">へのページ内リンクを作っています。
それにgototopというidを付与しています。


次にCSS。


div#gototop {
width: 80px;
height: 25px;
text-align: center;
border: 1px solid silver;
background-image: linear-gradient(#ffffff, #9C683A);
border-radius: 5px;
position: fixed;
bottom: 70px;
right: 10px;
}

ここはgototopのidが付与されたdivのスタイルですね。
ボタンの形と位置を決めています。
background-image: linear-gradient(線形グラデーション)とborder-radius(角を丸くする)はデザイン的要素なので、なくてもページトップに戻るボタンの機能自体は作れます。
position: fixedでブラウザの下から70px、右から10pxの位置にボタンを固定しています。

div#gototop:hover {
-webkit-animation-name: gototop;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: .1s;
}

ここでボタンをマウスオーバーした時の動きに関する設定をしています。
:hoverがマウスオーバーした時の指定です。
その下の四行で、アニメーションにgototopという名前を付け、1秒間でアニメーションを行う指定をし、終了がゆっくりになるような動きも指定し、アニメーションの開始時間はマウスオーバーしてから0.1秒後としています。
ちなみに-webkit-というのはベンダープレフィックスといい、animationはそのままだと一部のブラウザで動かなかったりしますので、これを追加することでちゃんと動くようにしています。
参考:Can I use... Support tables for HTML5, CSS3, etc


@-webkit-keyframes gototop {
0% {
}
20% {
margin-bottom: 20px;
}
50% {
margin-bottom: 0px;
}
70% {
margin-bottom: 10px
}
100% {
margin-bottom: 0px;
}
}

ここでgototopという名前が付けられたアニメーションの具体的な動きを指定しています。
時間(今回は1秒)が20%経過した時点で20px上に移動し、50%経過時点で一回戻ってきて、70%経過時点ではもう一度10px上まで移動し、終了時に再度戻ってきます。
うまくボタンが跳ねてるように見えるとうれしいのですが。


div#gototop a {
text-decoration: none;
line-height: 25px;
color: white;
}

これは「↑トップへ」のスタイル設定です。
リンクに自動的にくっついてくる下線をtext-decoration: none;で消すとともに、一行なので、line-height: 25px;でボックス自体のheightと同じにすることでボックスの中心にテキストが来るようにしています。


ボタン別に動かなくてもいい!という方へ


今回私がアニメーションを使いたかったのでこのように設定しましたが、単純にページトップに戻るボタンを作りたいだけであればページ内リンクを作ってposition: fixedでお好きな位置に配置して背景色でも設定すれば機能としては完成するでしょう。オーバーレイ広告が出てしまわない方は、bottom: 10px、right: 10pxとかで右下に配置すると邪魔にならなくていいかもしれません。ボタンのデザインに関してはもっときれいに作っていらっしゃる方がたくさんいらっしゃるので、素敵なデザインにしている方を見かけたら参考にしてみてはいかがでしょうか。


おわりに


私自身まだまだ初心者なのでコード等に不備があった場合は申し訳ございません。参考にされるのであれば必ずHTML及びCSSのバックアップを取ってからにしていただければ幸いです。


また今回初めてコードを記事に書きました。普通にコードを書くとHTMLとかはそれこそタグとして動いてしまうので、こちらのWEBツールを使用させていただきました。大変便利でした。
HTML特殊文字変換|コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited


とにもかくにもCSS及びCSS3のポテンシャルを強く感じました。作っててすごい楽しかったです。


スポンサーリンク

スポンサーリンク
にほんブログ村 小遣いブログ SOHO・在宅ワークへ
posted by あらいぐま at 20:38 | Comment(0) | TrackBack(0) | Seesaaカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。