マーカーネット株式会社

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のちょっとしたテクニック!CSSが効かない問題を回避!

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

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

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

CSS3のセレクタは幾つもありますよね。 今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。 E:first-child 親要素の最初の子要素であるE要素に適用 E:fi …

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

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

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

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

この「Dash」と呼ばれるプログラムはGeneral Assemblyが起業家などを育てる教育分野に転身したのをきっかけにもともと自社内の教育ツールとして開発されたものだったらしいのですが、評判が良か …

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

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

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