HTML の 要素 を 画面上 に 固定する(スクロールされないようにする)

目的

• HTMLファイルの要素(headerメニューなど)を画面上に固定する方法をまとめる。

押さえるポイント

• 要素を固定するにはpositionプロパティにてfixedを与える。
• topプロパティで基準からどれくらいの位置で要素を固定したいのを指定する。
• topプロパティでの位置の設定にはピクセル数で設定する。 ※基準は設定しないと画面左上がデフォルト設定となる。

書き方の例

• 下記にCSSファイルの内容を記載する。

画面に固定したい要素の名前かクラス名 {
  position: fixed;
  top: 基準から設置場所までの距離(ピクセル数)
}

より具体的な例

• headerをが画面上から10ピクセルのところで固定する。
• 下記にCSSファイルの内容を記載する。

header {
  position: fixed;
  top: 10px; 
}