マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS

Media Queries(メディアクエリ)でページトップに戻るボタンの位置を変えてみる

投稿日:2014年6月26日 更新日:

ページ右下によくある「トップに戻るボタン」。クリックするとスルスル~っとページの先頭にスクロールするやつですね。

ウィンドウの右下に固定だと、ウィンドウ幅が広いとコンテンツから離れすぎていてちょっと・・・なんてことはありませんか?
幅が広ければ、コンテンツのすぐ右辺りに表示したい!
でも、そうするとウィンドウが狭くなったときに見えなくなってしまう!!

そこで活躍するのが「@media screen and・・・」メディアクエリです。

① ウィンドウ幅が広い時は、コンテンツのすぐ右辺りに表示。
1
② ウィンドウ幅が狭い時は、ウィンドウの右下に固定。
2

こんな感じにしてみましょう。

#btn{
  width:100px;
  height:100px;
  position:fixed;
  bottom:50px;
}
/*-- ① ウィンドウ幅が広い時(1201px以上) --*/
@media screen and (min-width:1201px){
  #btn{
    left:50%;
    margin-left:525px; /*コンテンツの中心からボタンまでの距離*/
  }
}
/*-- ② ウィンドウ幅が狭い時(1200px以下) --*/
@media screen and (max-width:1200px){
  #btn{
    right:0;
    margin-left:0;
  }
}

これでjsを使わなくても、ウィンドウ幅によりスタイルを変えられます。
ワンソースでマルチデバイス対応させるレスポンシブデザインもこの方法でできますね!

またcss3がIEなど各ブラウザが対応していけば、マウスオーバーでボタンをクルクル~っとさせてみたり、スルスル~っとスクロールさせてみたりなんて動きもjs不要で、cssだけでできるようになりますね。まだまだjquery頼りですが、いつかcss3をガシガシ使える日がくるのでしょう・・・?

-CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

デザインを格好よくするためにシャドウを付けたりしますよね。 しかし、サイズが異なるたびに画像を背景に指定したりしなければならないのは大変です。 しかも、シャドウの幅の分だけはみ出ているということもあり …

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

「CSSを設定したのに効かない!?」っていうことありますよね。 その場合、一概には言えませんが、もしかしたらCSSの書き方が原因かもしれません。 下記を参考に、CSSを書き直せば直る可能性もぐっと高ま …

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …

【css技術】CSSだけで生成された歴代Appleのマウスがスゴい

【css技術】CSSだけで生成された歴代Appleのマウスがスゴい

css3の普及で、画像を使わなくとも ボタンで使用する様なグラーデーションや形など、 様々な表現を実現することができるようになってきました。 こうした機能も、上手く使いこなせるようになれば こんなこと …

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …