ヘッダーを position: fixed で画面の上に固定しています。本文がヘッダーの下に隠れないよう、ページ側（body や最初のセクション）に、ヘッダーの高さ分の padding-top を付けてください。スマホ幅ではメニューがロゴの下の1行になり、横にスクロールして選べます。今いるページのリンクには aria-current="page" を付けると下線が付きます。
HEADER
ヘッダーのCSS素材
ページの一番上に置くヘッダーです。見本の中をスクロールすると、固定のされ方や変化を確かめられます。ロゴの部分は文字にしてあるので画像に差し替えてください。
9種類
ヘッダーを position: fixed で画面の上に固定しています。本文がヘッダーの下に隠れないよう、ページ側（body や最初のセクション）に、ヘッダーの高さ分の padding-top を付けてください。電話番号は tel: リンクなので、スマホで押すとそのまま電話がかかります。スマホ幅では電話はアイコンだけになり、メニューは隠れます。スマホ幅ではメニューを隠しています。スマホ用のメニューは「スマホではハンバーガー」（he07）の作りを組み合わせてください。
ヘッダーを position: fixed で画面の上に固定しています。本文がヘッダーの下に隠れないよう、ページ側（body や最初のセクション）に、ヘッダーの高さ分の padding-top を付けてください。40px以上スクロールすると is-small が付き、高さとロゴが小さくなります。高さは「最初の高さ」「縮んだ高さ」で変えられます。スマホ幅ではメニューを隠しています。スマホ用のメニューは「スマホではハンバーガー」（he07）の作りを組み合わせてください。
最初は透明で、写真（ヒーロー）の上に白い文字で重なります。ヒーローを過ぎるくらいスクロールすると、白い背景に濃い文字へ切り替わります。切り替わる位置は JS の 200 で変えられます。ヒーローの上に重ねる作りなので、ページ側の padding-top は不要です。スマホ幅ではメニューを隠しています。スマホ用のメニューは「スマホではハンバーガー」（he07）の作りを組み合わせてください。
ヘッダーを position: fixed で画面の上に固定しています。本文がヘッダーの下に隠れないよう、ページ側（body や最初のセクション）に、ヘッダーの高さ分の padding-top を付けてください。お知らせ帯の右の × を押すと帯が消えます（ページを開き直すとまた出ます）。お知らせが不要な時期は .cs-he05__info を丸ごと消してください。スマホ幅ではメニューを隠しています。スマホ用のメニューは「スマホではハンバーガー」（he07）の作りを組み合わせてください。
ヘッダーを position: fixed で画面の上に固定しています。本文がヘッダーの下に隠れないよう、ページ側（body や最初のセクション）に、ヘッダーの高さ分の padding-top を付けてください。メニューを左右に分け、ロゴを真ん中に置いた形です。飲食店・サロン・旅館など、雰囲気を大事にしたいサイトに。スマホ幅では左右のメニューを隠し、ロゴと「ご予約」だけを残します。スマホ幅ではメニューを隠しています。スマホ用のメニューは「スマホではハンバーガー」（he07）の作りを組み合わせてください。
ヘッダーを position: fixed で画面の上に固定しています。本文がヘッダーの下に隠れないよう、ページ側（body や最初のセクション）に、ヘッダーの高さ分の padding-top を付けてください。画面の幅が768px以下になると、メニューが「三本線のボタン」にまとまります。見本の「スマホ」で切り替えて試してください。ボタンを押すとメニューが下に開き、もう一度押すか、リンクを押すか、Escキーで閉じます。切り替わる幅は @media (max-width: 768px) の数字で変えられます。
ヘッダーを position: fixed で画面の上に固定しています。本文がヘッダーの下に隠れないよう、ページ側（body や最初のセクション）に、ヘッダーの高さ分の padding-top を付けてください。下へ読み進めているあいだはヘッダーが上に隠れて画面を広く使え、少しでも上に戻すとすぐに出てきます。スマホで長い記事を読ませるページに向いています。スマホ幅ではメニューを隠しています。スマホ用のメニューは「スマホではハンバーガー」（he07）の作りを組み合わせてください。
最初は横いっぱいの透明なヘッダーで、スクロールすると画面の上に浮かぶ角丸の帯に変わります。後ろが少し透けて見える（backdrop-filter）ので、写真の多いページでも軽い印象です。ヒーローの上に重ねる作りです。スマホ幅ではメニューを隠しています。スマホ用のメニューは「スマホではハンバーガー」（he07）の作りを組み合わせてください。