グラスモーフィズム固定ヘッダー
スクロールに追従する固定ヘッダーに、ガラスのような半透明とぼかしを効かせたパーツです。 position:fixed で常に画面上部に留まり、背景に backdrop-filter:blur を掛けることで、下のコンテンツが透けてにじむグラスモーフィズム表現を実現しています。
このパーツの使いどころと実装ポイント
スクロールに追従する固定ヘッダーに、ガラスのような半透明とぼかしを効かせたパーツです。position:fixed で常に画面上部に留まり、背景に backdrop-filter:blur を掛けることで、下のコンテンツが透けてにじむグラスモーフィズム表現を実現しています。ページを少しスクロールすると hg--scrolled クラスが付き、背景の不透明度が上がって影が出る切り替えが入ります（クラスの付け外しは JavaScript で行います）。
ナビとモバイル対応
PC ではロゴ・テキストナビ・電話番号・CTAボタンを横並びにし、モバイルではハンバーガーボタンで開閉するメニューに切り替えます。ボタンには aria-expanded や aria-controls を付け、開閉状態が支援技術にも伝わるよう配慮しています。
向く場面と注意
- コーポレートサイト・サービスサイトの共通ヘッダー
- LPの上部固定ナビ
- 写真背景が映える店舗・ブランドサイト
backdrop-filter は対応ブラウザで美しく見えますが、未対応環境では単なる半透明になるため、背景色のフォールバックを必ず残してください。本体は z-index:100 で前面に固定し、ページ側に padding-top を入れてヘッダーと本文の重なりを防いでいます。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
backdrop-filterに対応していないブラウザではどう見えますか。
ぼかしは効かず、指定した半透明の背景色だけが適用されます。文字が読めなくなることはないよう、不透明度のあるフォールバック背景を残しているため、古い環境でも実用上問題なく表示されます。
固定ヘッダーで本文が隠れませんか。
隠れません。bodyにヘッダーの高さ分のpadding-topを入れて、最初のコンテンツがヘッダーの下に潜り込まないようにしています。ヘッダーの高さを変えた場合はこの余白も合わせて調整してください。