マーカーネット株式会社

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

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

関連記事

CSSカラーコードを16進数からRGBに変えた理由

CSSカラーコードを16進数からRGBに変えた理由

最近コーディングをする際、特にスマフォサイトの場合は特に スタイルシートのカラーコードを16進数ではなくRGBで記述する事が増えました。 私がカラーコードにRGBを使う様になった最大の理由がRGBの場 …

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

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

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

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

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

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

CSS3のみで吹き出しを作成してみました!上下左右どこでも大丈夫!

凝ったデザインなどには吹き出しなどを作成したりします。 ですが、内容を画像ではなくテキストにしたい場合があると思います。 吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよ …

超簡単!【CSS3】ロールオーバー効果

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