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

2019年7月18日

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

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

そんな時は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; /* フッターを最前面に表示 */
}

スポンサーリンク

csscss

Posted by ton