😎

【CSS】ヘッダを固定するサンプルコード

2025/07/21に公開

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>固定ヘッダ</title>
  <style>
    body {
    /*画面全体の余白をなくす*/
      margin: 0;
    }

    header {
      background: #333;
      color: #fff;
      padding: 20px;
      font-size: 24px;
      /*固定表示。スクロールしてもこの位置にとどまる*/
      position: fixed;
      /*上端に配置*/
      top: 0;
      /*横幅いっぱいに広げる*/
      width: 100%;
      /*他の要素より手前に表示する(数値が大きいほど手前)*/
      z-index: 1000;
    }

    .content {
      /* ヘッダの高さ分の余白を入れる */
      margin-top: 80px; 
      padding: 20px;
      /*ページをスクロールできるように、縦に長くしている*/
      height: 2000px;
      background: #f0f0f0;
    }
  </style>
</head>
<body>

  <header>
    固定ヘッダだよ！
  </header>

  <div class="content">
    スクロールしてもヘッダはずっと上にいます！
  </div>

</body>
</html>

ポイント

項目	説明
`position: fixed`	要素を画面の特定位置に固定できる
`z-index`	重なり順を制御できる（数値が大きいほど手前）
`margin-top`	固定要素とコンテンツが重ならないように調整

ポイント

Discussion