マーカーネット株式会社

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】ロールオーバー効果

超簡単!【jQuery】ロールオーバー効果 こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。実はCSS3でも全く同じ効果を再現できるので、今回はCSS3でロールオーバー効果を …

CSS3の便利機能紹介。

CSS3の便利機能紹介。 http://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …

WEB制作に便利!CSS3ボタンジェネレーター3選

WEB制作に便利!CSS3ボタンジェネレーター3選

もちろん使わない派の方もいるかもしれませんが、私は便利なツールがあればどんどん使っちゃいます。 WEB制作の時短にもつながる便利なジェネレーターをご紹介します。   「CSS3 Button …

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

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

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