ヘッダー

ヘッダーに分類されるWeb表現技法12件。スクロール追従・縮小ヘッダー、下スクロールで隠れるヘッダー、メガメニュー、全画面オーバーレイメニューなど。ライブデモとコピーできるコード付き。

ヒーロー上では背の高い透明ヘッダー、読み進めるとコンパクトな白帯へ縮小＋ロゴ縮小＋影付き。スクロール量で is-stuck を切替える定番の追従ヘッダーで、LPやコーポレートサイトに使えます。

下方向スクロールでヘッダーを隠し、上方向に戻すと即座に再表示。読書領域を最大化しつつ操作性を保つ手法で、記事・ドキュメント・モバイルサイトに向きます。スクロール方向の差分で translateY を制御します。

ナビ項目にホバー／フォーカスすると、複数カラムのリンクと説明を一度に見せる大型ドロップダウン。情報量の多いECやサービスサイトの回遊性を高めます。focus-within とJSの自動デモ開閉で動きを確認できます。

ハンバーガーをタップすると全画面メニューが開き、リンクが時間差で迫り上がる演出。アイコンはX字へモーフ。ポートフォリオやブランドサイトのモバイル導線に効く没入型ナビです。

ヘッダー上部にキャンペーン告知バー（カウントダウン＋閉じる）を重ねた構成。閉じるとバーがスッと畳まれ本体が上へ詰まります。セール・新機能・期間限定訴求の常套手段です。

中央にロゴを置き、ナビを左右へ振り分けるクラシックで上品なヘッダー。下線がスッと伸びるホバーと、スクロールで現れる影が特徴。ファッション・ホテル・レストラン等のブランドサイトに合います。

虫めがねアイコンをクリックすると、ナビの上をスライドして検索入力欄が伸びてくるヘッダー。普段はすっきり、必要なときだけ検索を前面に出せます。ECやメディアの回遊性を保ちつつ省スペースにできます。

ハンバーガーで左から滑り込むドロワー型サイドナビ。背景は暗幕で覆い、項目は時間差で現れます。階層の深いサイトや管理画面、モバイル導線に向く定番のスライドメニューです。

メガメニューほど大きくない、項目ごとの小さなドロップダウン。ホバー／フォーカスで数件のサブリンクをふわっと出します。情報量が中程度のサイトでちょうどよい、扱いやすいナビです。

ナビをタブのように扱い、選択中の項目へ下線インジケーターがスライド移動するヘッダー。現在地が一目で分かるため、セクションの多いLPやアプリ風サイトに合います。

ヘッダー上部に、お知らせが自動で切り替わる（または流れる）ティッカー帯を備えた構成。新着・在庫・速報などを途切れず伝えられます。メディアやEC、コミュニティサイトで便利です。

画面上端から少し浮かせた、角丸＋影のカプセル状ヘッダー。スクロールすると幅が締まって中央に寄ります。モダンなブランドサイトやポートフォリオで人気の“浮いている”ナビです。