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

2019年5月19日

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

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

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

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

[index.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="footer">
        <p>フッター固定</p>
    </div>
</body>
</html>

[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