マーカーネット株式会社

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

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

関連記事

<WordPress>カスタムフィールドテンプレートのテキストエディター(TinyMCE Advanced)で プラグインの設定通り反映されないとき

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

前回構造疑似クラスについて便利な使い方をご紹介しましたが、 (知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】) 今回はCSS3の属性セレクタをご紹介します。 E[foo] fo …

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。 このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウト …

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

今まで角丸のデザインにするには画像を背景に設定したりしていましたが、 幅や高さが変わるとそれに沿った画像を作成しなくてはならない場合があります。 それだと効率も悪く、修正もしづらいためコーディングが大 …

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

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

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

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

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

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