HTMLでヘッダーを固定する5つの方法

はじめに
HTMLヘッダーの固定とは
- 固定ヘッダーの基本理解
固定ヘッダーの作成方法
ヘッダー固定時のよくあるエラーと対処法
ヘッダー固定の応用例
エンジニアが知っておくべきHTMLヘッダー固定の豆知識
まとめ
関連記事

はじめに

HTMLでヘッダーを固定すると、長いページでもナビゲーション、検索、問い合わせ導線へ戻りやすくなります。ただし、position: fixedだけでは本文の重なり、アンカー位置のずれ、モバイル時の圧迫が起きるため、top、z-index、padding-topを合わせて設計します。

固定ヘッダーはHTMLの<header>や<nav>で構造を作り、CSSで位置を制御する実装が中心です。JavaScriptやBootstrapを使う場合も、HTMLの意味づけとCSSの配置ルールを先に整理すると保守しやすくなるのが基本です。

動作確認環境

HTML Living Standard / CSS Snapshot 2025 相当の構文
Google Chrome 126、Firefox 127、Safari 17 系で利用される標準的なCSS機能を前提
Bootstrap例は Bootstrap 5.3 のNavbar仕様を前提

📖 この記事で学べること

HTMLヘッダーを固定するときの最小構成
fixedとstickyの使い分け
本文がヘッダーに隠れる原因と調整方法
JavaScript、jQuery、Bootstrapを使う実装パターン
SEO、アクセシビリティ、レスポンシブ対応で確認する点

HTMLヘッダーの固定とは

HTMLヘッダーの固定は、スクロールしても画面上部にヘッダーを残すレイアウト手法です。最小構成は<header>を用意し、CSSでposition: fixed、top: 0、width: 100%を与えます。

<header class="site-header">
  <a class="logo" href="/">Sample Site</a>
  <nav aria-label="主要ナビゲーション">
    <a href="#home">ホーム</a>
    <a href="#service">サービス</a>
    <a href="#contact">お問い合わせ</a>
  </nav>
</header>
<main class="page-body">
  <section id="home">本文が入ります</section>
</main>

<style>
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #ffffff;
}
.page-body {
  padding-top: 64px;
}
</style>

結果: 期待される表示は、ヘッダーが画面上部に残り、本文がpadding-topの分だけ下から始まる状態です。

固定された領域は通常の文書フローから外れるため、本文側に余白を設けないと先頭コンテンツが隠れます。長い記事、商品一覧、管理画面、フォーム入力画面では、この余白設計が重要です。

CSSのpositionは要素の配置方法を決めるプロパティで、fixedはビューポート基準で配置されます。仕様はMDNのpositionリファレンスで確認できるのが目安です。

<header>はページやセクションの導入部を表すHTML要素です。MDNのheader要素の説明でも、見出しやナビゲーションなどを含められる要素として扱われているのが基本です。

固定ヘッダーは、HTML構造、CSS配置、本文余白、重なり順、レスポンシブ対応を分けて考えると整理しやすくなります。アンカーリンクのずれは、HTMLでアンカーリンクを活用する方法と合わせて確認できるのがポイントです。

項目	使うコード	役割	注意点
基本構造	`<header>`	ヘッダー領域を表す	見た目だけでなく意味づけにも使う
ナビゲーション	`<nav>`	主要リンク群を表す	`aria-label`で用途を補える
固定配置	`position: fixed`	画面基準で配置する	通常フローから外れる
上端配置	`top: 0`	上からの距離を決める	管理バーがある環境では調整する
左端配置	`left: 0`	左端を基準にする	横ずれを防ぎやすい
横幅	`width: 100%`	画面幅いっぱいに広げる	`box-sizing`も確認する
重なり順	`z-index`	前面表示を制御する	重ね合わせコンテキストに注意
背景	`background-color`	本文の透けを防ぐ	透明のままだと文字が重なる
本文余白	`padding-top`	本文の開始位置を下げる	ヘッダー高さに合わせる
外側余白	`margin-top`	要素間の距離を取る	親子の相殺に注意する
高さ	`height`	固定領域の高さを決める	文字折り返し時に不足しやすい
最小高さ	`min-height`	最低限の高さを保つ	動的メニューと相性がよい
配置	`display: flex`	ロゴとメニューを横並びにする	折り返し条件も設ける
横位置	`justify-content`	横方向の間隔を決める	リンク数が多いと詰まりやすい
縦位置	`align-items`	縦中央にそろえる	アイコンと文字の高さ差を吸収する
折り返し	`flex-wrap`	狭い幅で折り返す	固定高さとの整合が必要
余白計算	`calc()`	高さや余白を計算する	単位の混在に使える
CSS変数	`--header-height`	高さを一元管理する	複数箇所のずれを減らす
アンカー補正	`scroll-margin-top`	ジャンプ位置を下げる	見出しごとに設定できる
スムーズ移動	`scroll-behavior`	ページ内移動を滑らかにする	好みが分かれるため用途で判断
レスポンシブ	`@media`	画面幅ごとに調整する	高さと余白を同時に変える
表示切替	`classList.toggle()`	メニュー状態を切り替える	ボタンの状態表示も合わせる
スクロール監視	`addEventListener`	スクロール時に処理する	処理量を抑える
現在位置	`window.scrollY`	縦スクロール量を得る	古い書き方との混在を避ける
変形	`transform`	移動やアニメーションに使う	`top`変更より滑らかな場合がある
遷移	`transition`	表示切替をなめらかにする	長すぎると操作を妨げる
非表示	`translateY()`	ヘッダーを上へ逃がす	フォーカス時の扱いを確認する
横スクロール対策	`overflow-x`	横はみ出しを抑える	原因を隠すだけにしない
入力欄	`<input>`	検索窓を置く	`<label>`と組み合わせる
送信	`<button>`	フォーム送信や開閉に使う	`type`を明示する

固定ヘッダーの基本理解

固定ヘッダーは「画面に残す領域」と「その下を流れる本文」を別々に設計します。ヘッダーだけを固定しても本文の開始位置は下がらないため、main側にpadding-topを設定します。

余白を固定値で書くと、ヘッダーの高さ変更時に本文側の修正漏れが起きますし、ここがポイントです。:rootに--header-heightを置き、ヘッダーと本文で同じ値を使うと管理しやすくなるのが目安です。

<style>
:root {
  --header-height: 64px;
}
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  z-index: 1000;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.page-body {
  padding-top: var(--header-height);
}
</style>

結果: 期待される表示は、--header-heightを変えるだけでヘッダーの高さと本文の開始位置が同時に変わる状態です。

PCでは64px、スマートフォンでは56pxのように高さを切り替える場合も管理しやすくなります。メニューが折り返す設計では、固定値だけでなくmin-heightやpaddingも確認するのが一般的です。

💡 Tips: 固定ヘッダーでは、HTMLの意味づけとCSSの表示制御を混同しないことが大切です。<header>は文書上の役割を表し、固定するかどうかはpositionなどのCSSで決まります。

固定ヘッダーの作成方法

固定ヘッダーの作成方法は、CSSだけで完結する形、JavaScriptで表示を切り替える形、Bootstrapの既存クラスを使う形に分けられますし、ここがポイントです。通常のサイトで最初に選びやすいのはCSSだけの実装です。

スクロール方向に応じてヘッダーを隠す場合や、モバイルメニューを開閉する場合はJavaScriptが関わりますが、これは押さえたい点です。Bootstrap導入済みのサイトでは、公式Navbarに合わせると既存のグリッドやユーティリティクラスと整合しやすくなります。

サンプルコード1：CSSを使用した基本的なヘッダー固定

HTMLで<header>と<main>を分け、CSSでヘッダーを画面上部に固定します。依存が少なく、WordPressテーマや静的HTMLにも移しやすい形です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS固定ヘッダー</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: #222;
      color: #fff;
      padding: 16px 24px;
    }
    .site-header a { color: inherit; margin-right: 16px; }
    main { padding: 80px 24px 24px; }
  </style>
</head>
<body>
  <header class="site-header">
    <nav aria-label="主要メニュー">
      <a href="#home">ホーム</a>
      <a href="#about">概要</a>
      <a href="#contact">連絡先</a>
    </nav>
  </header>
  <main id="home">
    <h1>固定ヘッダーの例</h1>
    <p>スクロールしてもヘッダーが画面上部に残ります。</p>
  </main>
</body>
</html>

結果: 期待される表示は、黒いヘッダーが上部に固定され、本文が80px下から始まるレイアウトです。

* { box-sizing: border-box; }を入れると、paddingを含めた幅計算が扱いやすくなります。ヘッダーの高さを変えたらmainのpaddingも調整するのが現実的です。

サンプルコード2：JavaScriptを活用した動的なヘッダー固定

ヘッダーを常に表示すると、スマートフォンでは本文の表示領域が狭くなるのがポイントです。スクロール量に応じて出し入れするなら、addEventListenerでscrollを監視し、classListで状態を切り替えます。

<header class="site-header" id="siteHeader">
  <a href="/">Sample</a>
</header>
<main class="page-body">
  <p>スクロール量に応じてヘッダーを表示すると整理できます。</p>
</main>

<style>
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
  transition: transform 180ms ease;
  background: #fff;
  z-index: 1000;
}
.site-header.is-visible {
  transform: translateY(0);
}
.page-body {
  padding-top: 24px;
}
</style>

<script>
const header = document.getElementById('siteHeader');
window.addEventListener('scroll', () => {
  const shouldShow = window.scrollY > 80;
  header.classList.toggle('is-visible', shouldShow);
});
</script>

結果: 期待される表示は、ページ上部ではヘッダーが隠れ、80pxより下へスクロールすると上から現れる動きです。

topの値を頻繁に変えるより、transformで移動させるほうがアニメーションを設計しやすい場合があります。DOM検索をイベント内で繰り返さない構成にすると処理を抑えられます。

サンプルコード3：jQueryを用いたスクロール追従型ヘッダー

既存サイトがjQueryに依存している場合、スクロールに応じた表示切替をjQueryで書くこともあると理解できるのが一般的です。新規開発では標準のaddEventListenerで足りる場面が多いため、追加する理由を確認します。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<header class="site-header">スクロールで表示されるヘッダー</header>

<style>
.site-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #222;
  color: #fff;
  padding: 16px;
  z-index: 1000;
}
</style>

<script>
$(function() {
  $(window).on('scroll', function() {
    if ($(this).scrollTop() > 100) {
      $('.site-header').stop(true, true).slideDown(160);
    } else {
      $('.site-header').stop(true, true).slideUp(160);
    }
  });
});
</script>

結果: 期待される表示は、100pxより下にスクロールしたときだけヘッダーがスライド表示される動きです。

既存のjQueryサイトでは短い記述で表示切替を組み込めます。slideDown()とslideUp()のキュー対策として、例ではstop(true, true)を使っています。

サンプルコード4：Bootstrapを使用したレスポンシブヘッダー固定

Bootstrap導入済みなら、Navbarにfixed-topを付けるだけで上部固定の土台を作れますし、これが一つの目安です。Bootstrap 5.3のNavbar仕様はBootstrap公式ドキュメントで確認できるのが現実的です。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>

<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">Sample</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="メニューを開閉">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#home">ホーム</a></li>
        <li class="nav-item"><a class="nav-link" href="#service">サービス</a></li>
      </ul>
    </div>
  </div>
</nav>
<main class="container" style="padding-top: 80px;">
  <p>Bootstrapの固定ナビゲーション例です。</p>
</main>

結果: 期待される表示は、BootstrapのNavbarが画面上部に固定され、狭い幅では開閉ボタンに切り替わる状態です。

Bootstrap 5では、古いdata-toggleやdata-targetではなく、data-bs-toggleとdata-bs-targetを使います。古い記事のコードを流用する場合は、メジャーバージョンと属性名を合わせます。

サンプルコード5：Advanced CSS技術でのヘッダー固定

FlexboxやCSS変数を組み合わせると、ロゴ、ナビゲーション、検索導線を含む固定ヘッダーを作りやすくなると覚えるとよいでしょう。複雑なページでは、display: flex、gap、minmax()、clamp()などで崩れを抑えますが、これは押さえたい点です。

<style>
:root { --header-height: 72px; }
body { margin: 0; }
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: #fff;
  border-bottom: 1px solid #d7dce2;
  z-index: 1000;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-body {
  padding-top: calc(var(--header-height) + 24px);
}
@media (max-width: 640px) {
  :root { --header-height: 96px; }
  .site-header { align-items: flex-start; }
}
</style>

結果: 期待される表示は、画面幅が広いと横並び、狭いと折り返しを許容しながらヘッダーが固定される状態です。

スマートフォン時にヘッダーが高くなる前提で--header-heightも切り替えています。本文側のpadding-topも同じ変数を参照させると、重なりの修正漏れを減らせます。

検索フォームやカレンダーUIをヘッダー付近に置く画面では、入力欄の幅と開閉メニューの衝突も確認すると考えられますし、これが一つの目安です。日付選択UIと組み合わせるなら、HTMLとJSを使ってカレンダーを作成・更新する方法も参考になります。

ヘッダー固定時のよくあるエラーと対処法

つまずきやすいのは、ヘッダー固定後に本文が隠れる問題です。position: fixedの要素は通常フローから外れるため、後続の<main>や<section>はヘッダーがないものとして上から配置されます。

重なり対策ではヘッダー側だけでなく本文側も見ますが、覚えておくと役立つでしょう。本文余白、重なり順、アンカー移動、横スクロール、モバイル時の高さ変化を分けて確認すると整理できます。

⚠️ 注意: z-indexを大きくしても、本文がヘッダーの下に潜る問題は解決しません。重なり順と本文開始位置は別の問題として調整すると理解できます。

サンプルコード1：z-index問題の解決

モーダル、ドロップダウン、スライドショーなどがあるページでは、ヘッダーが背面に回ることがあると言えるでしょう。z-indexだけでなく、親要素が作る重ね合わせコンテキストも関係します。

<style>
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
}
.hero-slider {
  position: relative;
  z-index: 1;
}
.modal {
  position: fixed;
  z-index: 2000;
}
main {
  padding-top: 72px;
}
</style>

結果: 期待される表示は、通常コンテンツよりヘッダーが前面にあり、モーダルだけはヘッダーより上に表示される状態です。

ヘッダー、通常コンテンツ、モーダルの優先順位を意図的に分けられますが、覚えておくと役立つでしょう。親要素にtransformやopacityがあると新しい重ね合わせコンテキストが作られ、単純な数値比較だけでは解決しない場合があるのが基本です。

スライドショーと固定ヘッダーを同じファーストビューに置く場合は、画像やボタンの重なり順も確認します。カルーセル系UIを併用するなら、HTMLとCSSで手軽に作るスライドショーコピペの構造と照らし合わせます。

サンプルコード2：スクロール時のちらつき防止

スクロール時のちらつきは、背景が透明なヘッダー、頻繁なレイアウト再計算、画像の遅延読み込みなどで目立つことがあるのが目安です。translateZ(0)に頼らず、必要な範囲に絞って対処すると理解できます。

<style>
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background-color: #fff;
  transform: translateY(0);
  will-change: transform;
  border-bottom: 1px solid #e5e7eb;
}
.page-body {
  padding-top: 72px;
}
</style>

結果: 期待される表示は、白い背景を持つヘッダーが本文の上に安定して重なり、スクロール中も本文の文字が透けにくい状態です。

background-colorで透けを防ぎ、アニメーション対象をtransformに寄せています。will-changeはメモリ負荷につながる可能性があるため、動く要素に限定するのがポイントです。

アンカーリンクがヘッダーに隠れる場合

固定ヘッダーでは、#sectionへ移動した見出しがヘッダーの下に隠れることがあります。対象セクションや見出しへscroll-margin-topを設定すると調整しやすくなると覚えるとよいでしょう。

<style>
:root { --header-height: 72px; }
[id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}
html {
  scroll-behavior: smooth;
}
</style>

結果: 期待される表示は、ページ内リンクで移動した見出しがヘッダーの下に隠れず、少し余白を空けて表示される状態です。

全ID要素に適用すると、ページ内リンクの多い記事で調整漏れを減らせますし、ここを基本と考えるとよいでしょう。意図しない要素にも効くため、必要に応じてh2[id]や.anchor-targetへ対象を絞ります。

ヘッダー固定の応用例

ヘッダー固定の応用では、ユーザーが頻繁に使う操作を近くに置きます。ナビゲーション、検索、モバイルメニュー、フォームへの導線が代表例です。

固定領域に要素を詰め込みすぎると、本文の可読性やタップ操作を妨げますし、ここがポイントです。PCでは横並び、モバイルでは開閉式にするなど、画面幅に応じて情報量を調整すると考えられます。

サンプルコード1：ヘッダー内にナビゲーションメニューを含める

ナビゲーションを含む固定ヘッダーでは、リンクの意味と現在地の分かりやすさが大切です。<nav>にaria-labelを付けると、複数のナビゲーションがあるページでも役割を区別できます。

<header class="site-header">
  <a class="logo" href="/">Sample</a>
  <nav aria-label="サイト内メニュー">
    <ul class="nav-list">
      <li><a href="#home" aria-current="page">ホーム</a></li>
      <li><a href="#service">サービス</a></li>
      <li><a href="#price">料金</a></li>
      <li><a href="#contact">連絡先</a></li>
    </ul>
  </nav>
</header>
<style>
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #fff;
  z-index: 1000;
}
.nav-list {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
</style>

結果: 期待される表示は、ロゴが左、ナビゲーションリンクが右に並ぶ固定ヘッダーです。

見た目をCSSで調整しながら、HTML側ではリストとしてリンク群を表しています。サイト階層が複雑な場合は、HTMLとツリー構造をマスターするガイドを参考に親子関係を整理します。

サンプルコード2：ヘッダーに検索バーを組み込む

検索バーを固定ヘッダーに置くと、記事数や商品数が多いサイトで目的の情報へ移動しやすくなるのが一般的です。入力欄には<label>を用意し、見た目上は隠しても支援技術から読める形にすると言えるでしょう。

<header class="site-header">
  <form class="site-search" action="/search/" method="get" role="search">
    <label class="visually-hidden" for="siteSearch">サイト内検索</label>
    <input id="siteSearch" type="search" name="q" placeholder="キーワード">
    <button type="submit">検索</button>
  </form>
</header>
<style>
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 12px 24px;
  background: #fff;
  z-index: 1000;
}
.site-search {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
</style>

結果: 期待される表示は、固定ヘッダーの右側に検索入力欄と送信ボタンが並ぶ状態です。

検索フォームは、入力欄、ラベル、送信ボタンの関係が分かる構造にします。フォーム設計を広く整理するなら、HTMLで問い合わせフォームを作成する方法も確認できます。

サンプルコード3：モバイルフレンドリーなヘッダー固定

モバイルでは、ヘッダー固定により縦方向の表示領域が減りますが、これは押さえたい点です。リンクを常時すべて並べるより、ボタンでメニューを開閉する形が向く場合があるのが基本です。

<header class="site-header">
  <a href="/" class="logo">Sample</a>
  <button class="menu-button" type="button" aria-controls="globalNav" aria-expanded="false">メニュー</button>
  <nav id="globalNav" class="global-nav" aria-label="グローバルメニュー">
    <a href="#home">ホーム</a>
    <a href="#service">サービス</a>
    <a href="#contact">連絡先</a>
  </nav>
</header>
<script>
const button = document.querySelector('.menu-button');
const nav = document.querySelector('#globalNav');
button.addEventListener('click', () => {
  const opened = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', String(!opened));
  nav.classList.toggle('is-open', !opened);
});
</script>

結果: 期待される表示は、ボタンを押すたびにナビゲーションが開閉し、aria-expandedも状態に合わせて変わる動きです。

ボタンは<button>で作るのが自然です。リンクにクリックイベントを付けてボタンのように扱うより、キーボード操作やフォーム送信との関係を整理しやすくなります。

エンジニアが知っておくべきHTMLヘッダー固定の豆知識

HTMLヘッダー固定は見た目の変更に見えて、アクセシビリティ、SEO、描画負荷、保守性に関わります。固定領域が本文を隠すと、ページ内リンクやフォーム操作にも影響するのが現実的です。

安定させるには、基準値を一元化し、スクロール時の処理を軽くし、モバイルで高さを抑えますし、ここを基本と考えるとよいでしょう。キーボード操作、画面幅、ズーム表示も確認対象に含めます。

豆知識1：パフォーマンスへの影響

スクロールに合わせてヘッダーを動かす場合、毎回DOMを大量に読み書きすると描画が重くなると整理できます。状態の切り替えはクラスの付け外しに寄せ、見た目の変化はCSS側のtransformやopacityで扱いるのが目安です。

<style>
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  transform: translateY(0);
  transition: transform 160ms ease;
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
</style>
<script>
const siteHeader = document.querySelector('.site-header');
let previousY = window.scrollY;
window.addEventListener('scroll', () => {
  const currentY = window.scrollY;
  siteHeader.classList.toggle('is-hidden', currentY > previousY && currentY > 120);
  previousY = currentY;
});
</script>

結果: 期待される表示は、下方向へスクロールするとヘッダーが隠れ、上方向へ戻ると再表示される動きです。

スクロール方向に応じた表示切替を作れます。重い画像や動画がある場合は、ヘッダーだけでなくコンテンツ側の読み込みやサイズ指定も見直します。

豆知識2：SEOへの影響

固定ヘッダーそのものがSEOに直接悪影響を与えるわけではありません。ただし、本文やフォームの主要部分が固定領域に隠れると、ユーザーが情報へ到達しにくくなると理解できるのがポイントです。

モバイルではヘッダーを低く保ち、リンク数を絞り、コンテンツ先頭が隠れない余白を確保します。HTMLの意味構造と読みやすい表示の両立が重要です。

<style>
:root { --header-height: 64px; }
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  min-height: var(--header-height);
  background: #fff;
  z-index: 1000;
}
main {
  padding-top: calc(var(--header-height) + 16px);
}
@media (max-width: 600px) {
  :root { --header-height: 56px; }
  .site-header nav a:nth-child(n + 4) {
    display: none;
  }
}
</style>

結果: 期待される表示は、PCでは通常の固定ヘッダー、600px以下では高さを抑えた固定ヘッダーになる状態です。

レスポンシブ時は高さとリンク数を同時に調整します。重要なリンクを非表示にする場合は、開閉メニューやフッターナビゲーションで補います。

ℹ️ 補足: 固定ヘッダーは、PCとスマートフォンで同じ高さにする必要はありません。画面幅、タップ領域、本文の読みやすさを合わせて判断するのが基本です。

fixedとstickyの使い分け

position: fixedは画面基準で常に同じ位置へ置く指定です。position: stickyは通常の位置に流れたあと、指定位置に到達すると貼り付きますし、これが一つの目安です。

サイト全体のグローバルヘッダーならfixed、記事内の目次やセクション見出しならstickyが向く場合があるのが一般的です。親要素のoverflow設定でstickyが動かないこともあるため、スクロールコンテナの関係を確認します。

比較項目	`fixed`	`sticky`
基準	ビューポート基準	スクロール中の親要素基準
文書フロー	外れる	通常位置を保ちながら貼り付く
用途	グローバルヘッダー	目次、セクション内見出し
注意点	本文余白が必要	親の`overflow`に影響される

まとめ

HTMLでヘッダーを固定するなら、<header>と<nav>で構造を作り、CSSでposition: fixed、top: 0、z-index、本文側のpadding-topを組み合わせます。固定だけを先に入れると本文の重なりが起きるため、ヘッダーと本文を一体で調整します。

表示を変えるならJavaScript、既存UI基盤に合わせるならBootstrap、細かなレイアウト調整にはFlexboxやCSS変数を使いると覚えるとよいでしょう。jQueryは既存サイトとの整合がある場合に選び、新規実装では標準APIで足りるか確認するのが現実的です。

押さえる点は、本文が隠れない余白、アンカーリンクの補正、モバイル時の高さ、重なり順、スクロール時の処理量です。分けて確認すると、操作しやすいHTMLヘッダー固定に近づきます。

著者: Japanシーモア編集部

Japanシーモアは、Web/IoT/APP/SYS 分野のプログラミング情報を体系的に提供するメディアです。本記事は編集部による執筆とAI支援を組み合わせて制作し、公開前に編集部が校正しています。誤りや改善案がございましたらお問い合わせよりご連絡ください。

※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。