スティッキーナビヘッダー
このパーツは、ロゴ・ナビゲーション・検索・CTAをまとめた追従型ヘッダーです。 position:sticky;top:0 でスクロールしても画面上部に張り付き、 backdrop-filter:blur(10px) と半透明背景で下のコンテンツがうっすら透けます。
このパーツの使いどころと実装ポイント
このパーツは、ロゴ・ナビゲーション・検索・CTAをまとめた追従型ヘッダーです。position:sticky;top:0 でスクロールしても画面上部に張り付き、backdrop-filter:blur(10px) と半透明背景で下のコンテンツがうっすら透けます。モバイルでは、JavaScriptを使わず input type=checkbox とラベルの組み合わせ（チェックボックスハック）でハンバーガーメニューの開閉を切り替えます。ロゴはマークとブランド名のセットで構成されています。
向いている場面
- コーポレートサイトやサービスサイトの定番ヘッダーとして
- ページが縦に長く、常にナビへ戻れる導線が欲しいとき
- 外部スクリプトを増やさず、軽い実装でメニュー開閉を実現したいとき
差し替えどころは、ロゴのマーク文字とブランド名、ナビ項目とリンク先、CTAのラベルです。ナビ項目は4つ前後に絞ると横幅に収まりやすく、迷いも減ります。CTAは問い合わせや申込など、最も押してほしい行動を1つだけ置くのが効果的です。
実装上の注意
チェックボックスハックは便利ですが、開閉状態を支援技術へ正しく伝えるには aria-expanded などの補足が望ましいです。position:sticky は親要素に overflow:hidden があると効かなくなるため、祖先のスタイルに注意してください。半透明背景の上に文字が乗るので、スクロール時に背景画像と重なっても読めるかを確認します。検索アイコンとハンバーガーには aria-label が付いています。
よくある質問
JavaScriptなしでメニューが開閉するのはなぜですか？
非表示のチェックボックス（input type=checkbox）と、それを操作するlabelを組み合わせる「チェックボックスハック」という手法を使っているためです。ラベルを押すとチェック状態が切り替わり、その状態をCSSの :checked セレクタで拾ってメニューの表示を制御しています。外部スクリプトを増やさず軽量に実装できるのが利点です。
position:stickyが効かず、ヘッダーが追従しません。
最も多い原因は、ヘッダーの親や祖先要素に overflow:hidden や overflow:auto が指定されていることです。sticky はスクロールする祖先を基準に張り付くため、これらが途中にあると効きません。親要素のCSSを見直すか、ヘッダーをその要素の外側に出すと改善します。top の指定漏れでも動かない点に注意してください。