【css】画面の特定の位置に文字などを固定表示させる

2019年5月15日2019年7月18日css

メニューなどを画面のある位置に固定表示させたい場合ってありますよね。

スクロールしても画面の下部にボタンを表示し続けるようにしたいなど。

そんな時はcssで「position: fixed;」を指定しましょう！

[サンプル]
・画面の下部にオレンジの横の枠があり、「フッター固定」と表示されています。
　スクロールしても下部に固定されたままですよね。

[index.html]

<div class="footer">

    フッター固定

</div>

[index.css]

/* フッター固定 */
.footer {
  position: fixed; /* フッターを固定する */
  background-color: orange; /* 背景色 */
  text-align: center; /* 文字を中央に */
  bottom: 15px; /* 上部から配置の基準位置を決める */
  right: 10px; /* 左から配置の基準位置を決める */
  width: 100%; /* フッターの横幅を指定する */
  height: 35px; /* フッターの高さを指定する */
  z-index: 100; /* フッターを最前面に表示 */
}