画面の固定位置にボタンを表示する方法を紹介します。
HTML
補足
- 固定表示するボタン(span要素)に navi-button クラスを付けます。
- 同時に、表示する位置を指定するクラス( top-left 等)も付けます。
CSS
補足
- navi-button クラスに position: fixed を指定し、固定位置に表示されるようにしています。
- navi-button クラスで span 要素を inline-block 化し、ボタンの大きさや色などを指定しています。
- navi-button クラス内の em 要素がボタンの中央に表示されるようスタイルを指定しています。
- top-left ~ middle-center クラスで、ボタンの表示位置を定義しています。