固定配置ヘッダー デザイン見本
CSS の position: fixed を使ってヘッダーをページ上部に固定し、スクロール時も常に表示し続ける実装デモ。コピーしてすぐ使えるコードを掲載しています。
① position: fixed — スクロールに追従する固定ヘッダー
現在: sticky（追従中）
HTML
<div class="header-box"></div>
<header>
<div class="logo">ロゴ</div>
<nav>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
</header>CSS
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #1e293b;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 100;
box-sizing: border-box;
}
nav ul {
display: flex;
gap: 16px;
list-style: none;
padding: 0;
margin: 0;
}
nav a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: 0.8rem;
}
.header-box {
height: 60px;
}
position: fixed の動作
position: fixed を指定すると、要素はスクロールに関係なく画面上の指定位置に固定されます。top: 0; left: 0; width: 100%; の組み合わせで画面上端いっぱいにヘッダーを広げられます。z-index を他の要素より高く設定して最前面に表示させることも重要です。なお、このデモは記事内での確認のため position: sticky で代用しています。実際の実装では position: fixed を使用してください。
② header-box — コンテンツが隠れるのを防ぐ余白
現在: header-box あり — 先頭行が見えています
HTML
<div class="header-box"></div>
<header> ... </header>
<main>
<p>コンテンツの先頭行</p>
</main>CSS
.header-box {
height: 60px;
}
position: fixed の落とし穴と対処法
position: fixed を指定すると、その要素は通常のドキュメントフローから外れます。ページ読み込み直後の状態でも、固定ヘッダーの下にコンテンツが潜り込んで先頭が見えなくなります。ヘッダーと同じ高さの空 div（.header-box）をヘッダーの直前に置くだけで解決できます。
③ レスポンシブ対応 — PC / モバイルでメニューを切り替える
現在: PC表示（ナビメニュー表示中）
HTML
<header>
<div class="logo">ロゴ</div>
<nav class="pc-menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<div class="mobile-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</header>CSS
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #1e293b;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
z-index: 100;
box-sizing: border-box;
}
.pc-menu ul {
display: flex;
gap: 16px;
list-style: none;
padding: 0;
margin: 0;
}
.pc-menu a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: 0.8rem;
}
.mobile-menu {
display: none;
width: 30px;
height: 22px;
cursor: pointer;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.line {
background-color: #fff;
height: 4px;
width: 100%;
position: absolute;
border-radius: 2px;
}
.line:nth-of-type(1) { top: 0; }
.line:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
.line:nth-of-type(3) { bottom: 0; }
@media (max-width: 800px) {
.pc-menu { display: none; }
.mobile-menu { display: block; }
}
@media (max-width: 800px)
メディアクエリを使うと、画面幅に応じてスタイルを切り替えられます。PC では横並びのナビメニューをそのまま表示し、モバイルではハンバーガーアイコンに切り替えるのが一般的なパターンです。ハンバーガーアイコンのクリックでメニューを展開する動作は JavaScript で実装します。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS）
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開してい…