CSSで画面横にボタンなどを固定する方法

固定

投稿日 更新日

by Chiharu Morita

画面の横に常に固定する方法です。何に使えるかというと。Topに戻るボタンや、 Twitterのフォローボタンやfacebookのいいねボタンや、他のコンテンツへのリンクなどなど、 使い方はいろいろ考えられますので、検討されてはいかがでしょうか。IE6は非対応です。

  1. position:fixedの使い方
  2. 上に戻るボタンの例
  3. SNSボタンの例

position:fixed;の使い方

指定した位置に固定する事ができます。
指定する位置は上のボックスにposition:relativeが入っているボックスに対して固定されます。

top:上からの位置
bottom:下からの位置
left:左からの位置
right:右からの位置

で指定します。

上に戻るボタンの例

ブラウザやスマートフォンの右下に良くある上に戻るボタンを例に説明します。




 




#return{
 position:fixed;
 bottom:10px;
 right:10px;
 z-index:999;
}

HTMLの書く場所はbodyタグ内ですが、</footer>の直前がいいとおもいます。 position:fixedが非対応ブラウザの場合でも、</footer>の直前であれば一番下に表示されることになるので、 そんなに問題はないでしょう。

2017年度はほとんどのブラウザがposition:fixedに対応しているため、上述のことは無視してください。
スマートフォンブラウザの場合は、iOS4・Android2.3.x以前には対応していませんが、いずれにしても古いブラウザはどんどん減っていきますので、さほど問題にはならないと思います。

参考サイト：ブラウザ対応状況

#returnの部分はdiv idでボックスを作って右横に配置しています。
ユーザーさんの邪魔にならないように入れるようにします。大きめのボタンであれば、背景透過画像を用意するとか、CSSの「opasity」で背景を透過にするなど工夫し、バックグラウンドにあるコンテンツが解るようにするのもいいかもしれません。小さいボタンであれば、透過させずはっきり目立つようなものがいいかと思います。

jQueryでスムーズなスクロールを実現してみよう！

こちらのコードで、設置するとスムーズなアニメーションでページトップに戻る事が可能となります。（下にスクロールするとボタンが現れたり、上にスクロールするとボタンが消えるコードは含まれていません。）
</body>の直前に貼付けてください。

フェードインとフェードアウトを実装するには、こちらのコードも合わせて使います。windowのスクロール位置を取得して100以上になればフェードインし、100以下になったらフェードアウトします。

var retb = $('#return');
  $(retb).hide();
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
      $(retb).fadeIn();
    }
    else {
      $(retb).fadeOut();
    }
  });

合わせて使うならこんな感じになります。

jQuery(function($){
 var retb = $('#return');
 $(retb).hide();
 $(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
      $(retb).fadeIn();
  }
  else {
      $(retb).fadeOut();
  }
 });
 
$(retb).click(function(){
 $('html,body').animate({
    scrollTop: 0
  }, 300);
  return false;
 });
});

SNSボタンの例

ソーシャルボタンを固定する
ソーシャルメディアのボタンを固定することにも使えます。Facebook・Twitter・ピンタレスト・ハテナブックマークのボタンの取得方法の記事もあります。「ホームページにソーシャルボタンを設置する方法」をご覧ください。




 
 
 
 




#return{
 position:fixed;
 bottom:100px;
 left:0;
 z-index:9999;
}

ソーシャルボタンのリンクはちょっと難しいのですが、WordPressに設置する場合のコードを貼り付けておきます。*HTMLの静的サイトの場合は各ページのURLを指定する必要があるので大変になりますので、公式サイトからボタンを取得する方をお勧めします。

下のコードはWordPressでURLを取得してエンコーディングするコードになります。

エンコードしたURLを各SNSサービスのリンクに表示します。

少し難しいと思う方は、公式サイトからデフォルトのボタンを取得して配置してもいいでしょう。

こちらに各サービスのボタン取得先ページを掲載しています。ホームページにソーシャルボタンを設置する方法

カテゴリー ホームページ作成テクニック

タグ