2017年4月11日

画面の固定位置にボタンを表示

画面の固定位置にボタンを表示する方法を紹介します。

HTML

補足

  • 固定表示するボタン(span要素)に navi-button クラスを付けます。
  • 同時に、表示する位置を指定するクラス( top-left 等)も付けます。

CSS

補足

  • navi-button クラスに position: fixed を指定し、固定位置に表示されるようにしています。
  • navi-button クラスで span 要素を inline-block 化し、ボタンの大きさや色などを指定しています。
  • navi-button クラス内の em 要素がボタンの中央に表示されるようスタイルを指定しています。
  • top-left ~ middle-center クラスで、ボタンの表示位置を定義しています。

サンプル