上部に固定されるヘッダーを作る方法
ページをスクロールしても画面上部に固定されたまま表示されるヘッダーを、HTMLとCSSで作る方法を紹介します。通常のヘッダーはページを下へスクロールすると画面外へ移動しますが、固定ヘッダーにすることでサイト名やナビゲーションをいつでも確認できるようになります。
今回のサンプルでは、左側にサイト名、右側に「ホーム」「サービス」「会社概要」「お問い合わせ」のナビゲーションを配置します。基本のヘッダーをベースに、CSSで画面上部へ固定する設定を追加し、ページをスクロールしてもヘッダーが同じ位置に残る構成にします。
長いページでもナビゲーションへすぐアクセスできるため、Webサイトやブログなどで利用できます。画面幅が狭い場合はサイト名とナビゲーションを縦方向に並べ、スマートフォンでも見やすいレイアウトに切り替わります。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
Sample Site
このエリアをスクロールして、ヘッダーが上部に固定されることを確認できます。
デモ内を下へスクロールすると、ヘッダーが上部に固定されたまま表示されることを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>上部に固定されるヘッダー</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ページ上部に固定するヘッダー -->
<header class="fixed-header_header">
<!-- ヘッダーの内側 -->
<div class="fixed-header_inner">
<!-- サイト名。自由に書き換えられます -->
<p class="fixed-header_logo">
Sample Site
</p>
<!-- メインナビゲーション -->
<nav class="fixed-header_nav" aria-label="メインナビゲーション">
<!-- hrefと表示文字はサイトに合わせて変更してください -->
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">会社概要</a>
<a href="#">お問い合わせ</a>
</nav>
</div>
</header>
<!-- ページ本文。ここは実際の記事内容などへ自由に書き換えられます -->
<main class="fixed-header_content">
<!-- ページタイトル -->
<div class="fixed-header_content-title">
ページタイトル
</div>
<!-- ページの説明文 -->
<p class="fixed-header_content-text">
ページを下へスクロールして、ヘッダーが上部に固定されることを確認できます。
</p>
</main>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではサイト名、ナビゲーション、ページ本文を作成し、CSSではヘッダーのレイアウトや背景色、余白、影に加えて、スクロールしても画面上部に固定される動作を設定します。JavaScriptは使用せず、CSSのposition:sticky;とtop:0;を使用して固定ヘッダーを実装しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはヘッダーとページ本文を構成するファイルです。「Sample Site」のサイト名、「ホーム」「サービス」「会社概要」「お問い合わせ」のナビゲーション、ページタイトル、説明文を変更できます。各ナビゲーションのhrefを変更すると、実際のページへのリンクを設定できます。
style.cssはヘッダーとページ本文のデザインを設定するファイルです。ヘッダーの固定位置、横幅、余白、背景色、枠線、影、サイト名やナビゲーションの文字サイズ、各要素の間隔、ページ本文の高さなどを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置し、sample/index.htmlをブラウザで開いてください。ページを下へスクロールすると、本文は通常どおり移動し、ヘッダーは画面上部に固定されたまま表示されます。ナビゲーションを実際のページで使用する場合は、index.html内にある各href="#"を移動先のURLへ変更してください。
カスタマイズできる内容
index.htmlではサイト名、ナビゲーションの表示文字とリンク先、ページタイトル、説明文を変更できます。style.cssではヘッダーの背景色、下側の枠線、影、内側余白、最大横幅、サイト名とナビゲーションの文字サイズや間隔を変更できます。固定位置は.fixed-header_headerのtop:0;で設定しており、数値を変更すると画面上端から離れた位置へ固定することもできます。
数値調整
style.css
top:0;
ヘッダーを固定する上端からの位置です。0では画面の一番上に固定され、値を大きくすると上端から離れた位置に固定されます。
z-index:10;
ヘッダーの重なり順です。値を大きくすると、ほかの要素より手前に表示されやすくなります。
padding:28px 40px;
ヘッダーの内側余白です。上下の28pxを大きくするとヘッダーが高くなり、左右の40pxを大きくすると画面端との間隔が広がります。
border-bottom:1px solid #e5e7eb;
ヘッダー下側の枠線です。1pxを大きくすると線が太くなり、小さくすると細くなります。
box-shadow:0 4px 18px ...
ヘッダー下側に表示する影です。4pxを変更すると影の縦方向の位置が変わり、18pxを変更すると影のぼかし範囲が変わります。
gap:40px;
サイト名とナビゲーションの間隔です。値を大きくすると両者の間隔が広がり、小さくすると近くなります。
max-width:1200px;
ヘッダー内側の最大横幅です。値を大きくするとサイト名とナビゲーションを配置できる範囲が広がり、小さくすると中央寄りの配置になります。
font-size:20px;
サイト名の文字サイズです。値を大きくするとサイト名が大きくなり、小さくすると控えめになります。
gap:8px 24px;
ナビゲーションリンク同士の間隔です。8pxは上下方向、24pxは左右方向の間隔です。値を大きくするとリンク同士が離れます。
font-size:14px;
ナビゲーションリンクの文字サイズです。値を大きくすると文字が大きくなり、小さくするとコンパクトになります。
transition:color .3s ease;
ナビゲーションリンクの文字色が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。
min-height:900px;
ページ本文の最低高さです。値を大きくするとページが長くなり、固定ヘッダーを確認できるスクロール距離も長くなります。
padding:80px 24px;
ページ本文の内側余白です。上下の80pxを大きくするとヘッダーと本文内容の間隔が広がり、左右の24pxを大きくすると画面端との間隔が広がります。
margin:0 0 12px;
ページタイトルの下側余白です。12pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると近くなります。
font-size:28px;
ページタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
line-height:1.8;
ページ説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;によってヘッダーを画面幅いっぱいに表示し、max-width:1200px;によって内側の内容が必要以上に広がらないようにしています。画面幅が768px以下になると、サイト名とナビゲーションを縦方向へ並べ、ヘッダーの余白を24px 20px、サイト名とナビゲーションの間隔を24px、リンク同士の間隔を12px 20pxへ変更するため、スマートフォン・タブレット・PCで利用できます。
コメント