森川Web制作事務所

【CSS】ヘッダーを固定するにはposition:fixedを使おう

2023.09.25

HTMLとCSSでヘッダーを作っていると、画面上部に常に固定したいという状況に出くわすと思います。

基本のヘッダーの状態を見てみよう

<body class="body">
  <header class="header">ヘッダー通常</header>
</body>
.body{
  height: 1800px;
  background-color: gray;
}

.header{
  background-color: green;
  height:200px;
  text-align: center;
  font-size:30px;
}

ヘッダーがどれか見やすいように背景を灰色、ヘッダーを緑色で色付けしました。

ヘッダーがどれか見やすいように背景を灰色、ヘッダーを緑色で色付けしました。

ヘッダーを固定するにはposition:fixedを使う！

<body class="body">
  <header class="header">ヘッダーfixedで固定</header>
</body>
.body{
  height: 1800px;
  background-color: gray;
}

.header{
  background-color: green;
  height:200px;
  text-align: center;
  font-size:30px;
  position:fixed;
  width: 100%;
}

今回は分かりやすいようにスクロールも見えるようにしました。

スクロールで上下に動かしているのに緑色のヘッダーがさっきと違って消えてないのが分かりますか？

position:fixedを使うとこういう画面の上に固定ということが実現可能になります。

まとめ

今回はヘッダーを画面上部に固定する方法をお伝えしました。

今回の方法はよく見かけるので覚えておくと便利だと思いますよ！

それではまた！