Webページを閲覧していると、上部にあるナビゲーションバーやロゴなどの「ヘッダー」が、スクロールしても常に画面上部に表示されているサイトをよく見かけます。これは「固定ヘッダー（Sticky Header）」と呼ばれ、ユーザーがどこまでスクロールしても必要な情報にすぐアクセスできるという利点があります。
本記事では、HTML・CSS・JavaScriptを用いて、スクロールに追従する固定ヘッダーの基本的な作り方から、より実用的なUI演出までを、サンプルコードと共にわかりやすく解説します。初心者でもすぐに使えるコードなので、ぜひ自分のWebサイトに取り入れてみてください。
まずはHTMLで、固定したいヘッダーとその下に続くコンテンツ部分の基本構造を作成します。以下が最小限のHTMLサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定ヘッダーのサンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<h1>My Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section>
<h2>コンテンツエリア</h2>
<p>ここにたくさんのスクロールコンテンツを入れてください。</p>
<!-- スクロールするためのダミーコンテンツ -->
<div style="height: 2000px;"></div>
</section>
</main>
</body>
</html>
ここでは、<header>タグ内にロゴとナビゲーションリンクを設置しています。次にこのヘッダーを画面上に固定するためのCSSを作成します。
CSSを使えば、ヘッダーを簡単にスクロール追従させることができます。以下のようにposition: fixedを使いましょう。
/* style.css */
body {
margin: 0;
font-family: sans-serif;
}
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
z-index: 1000;
}
.site-header nav a {
color: white;
margin-left: 15px;
text-decoration: none;
}
main {
padding-top: 80px; /* ヘッダーの高さに応じて余白を確保 */
}
ここでは、ヘッダーを固定するために position: fixed を使い、top: 0 で上部にピッタリと固定します。背景色やボックスシャドウで視認性もアップ。mainにパディングを入れることで、ヘッダーにコンテンツが隠れるのを防ぎます。
CSSだけで固定ヘッダーは作れますが、JavaScriptを使えばもっとユーザビリティの高い動きも可能になります。たとえば「スクロールしたときだけヘッダーに背景色をつける」などです。
// script.js
window.addEventListener('scroll', function () {
const header = document.querySelector('.site-header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
CSSも以下のように追加します：
/* ヘッダーのスクロール時スタイル */
.site-header.scrolled {
background-color: #222;
transition: background-color 0.3s;
}
このスクリプトでは、ページを50px以上スクロールしたら.scrolledクラスがヘッダーに追加され、背景色が変わるようになります。ユーザーが「今どこまで見たか」を視覚的に理解しやすくなります。
現代のWebページではスマホ表示への対応も欠かせません。メディアクエリを使って、スマートフォンやタブレットでも使いやすいナビゲーションに調整しましょう。
@media (max-width: 600px) {
.site-header {
flex-direction: column;
height: auto;
align-items: flex-start;
padding: 10px;
}
.site-header nav a {
margin: 5px 0;
}
}
このCSSでは、画面幅600px以下でレイアウトを縦方向に変え、リンク同士のスペースを適切に保ちます。タッチ操作の快適さも向上します。
position: fixedを使うと、後続の要素がヘッダーの下に隠れることがあります。これを防ぐには、main要素などに適切なpadding-topを入れてスペースを確保する必要があります。
他の要素がヘッダーの上に来てしまう場合は、z-indexを使って重なり順を調整しましょう。z-index: 1000以上ならまず安心です。
iOSやAndroidブラウザでは、position: fixedの挙動が少し違うことがあります。特にソフトキーボードを使ったフォーム入力時に画面が乱れることがあるため、必要に応じてモバイル表示用にJSやCSSでの補正を検討しましょう。
基本の固定ヘッダーができたら、さらに魅力的にする工夫も試してみましょう。
// スクロールでヘッダーのサイズを変更する例
window.addEventListener('scroll', () => {
const header = document.querySelector('.site-header');
header.style.height = window.scrollY > 100 ? '40px' : '60px';
});
ユーザーがストレスなく情報を得られるように、視認性・操作性のバランスを考えることが大切です。
固定ヘッダーは、使い方によってはWebページの利便性を大きく向上させます。今回紹介したHTML・CSS・JavaScriptの基本を押さえれば、実用的で美しいヘッダーを誰でも簡単に作ることができます。
ポイントをおさらいしましょう。
position: fixedで固定ヘッダーを作るmainに余白を設けてコンテンツの隠れを防ぐWebサイトの第一印象を左右するヘッダーだからこそ、しっかり作り込んで、見た目も機能も快適なページを目指しましょう。