ヘッダー初級

中央ロゴ・振り分けナビ

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

#header#centered#navigation#elegant

ライブデモ

使用例（お題: カフェ MOON BREW）

この技法を「カフェ MOON BREW」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- MOON BREW：カフェのブランドサイト（中央ロゴ） -->
<div class="hcl-frame">
  <header class="hcl-head" id="hclHead">
    <nav class="hcl-nav hcl-nav--left">
      <a href="#" onclick="return false">Menu</a>
      <a href="#" onclick="return false">Beans</a>
    </nav>
    <a class="hcl-logo" href="#" onclick="return false">MOON&nbsp;BREW</a>
    <nav class="hcl-nav hcl-nav--right">
      <a href="#" onclick="return false">Stores</a>
      <a href="#" onclick="return false">Online</a>
    </nav>
  </header>

  <div class="hcl-scroll" id="hclScroll">
    <section class="hcl-hero">
      <p class="hcl-hero__kicker">SINCE 2019 · TOKYO</p>
      <h1>夜にひらく、珈琲店</h1>
      <p class="hcl-hero__sub">深夜焙煎の一杯と、静かな時間を。ナビは左右に振り分け、スクロールで影が現れます。</p>
    </section>
    <section class="hcl-strip hcl-strip--a"></section>
    <section class="hcl-strip hcl-strip--b"></section>
    <section class="hcl-note"><p>月替わりのシングルオリジンと、定番のムーンブレンド。店頭・オンラインどちらでもお求めいただけます。</p></section>
  </div>
</div>

CSS

/* MOON BREW（カフェ）：中央ロゴ・振り分けナビの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Mincho ProN", "Times New Roman", serif; }

.hcl-frame { position: relative; width: 100%; height: 380px; overflow: hidden; background: #f7f2e9; }

.hcl-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 66px; padding: 0 26px;
  background: rgba(247,242,233,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(90,60,30,.1); transition: box-shadow .3s ease, background .3s ease;
}
.hcl-head.is-stuck { background: rgba(255,253,248,.96); box-shadow: 0 8px 24px rgba(90,60,30,.14); }
.hcl-logo { grid-column: 2; justify-self: center; font-size: 21px; font-weight: 700; letter-spacing: .16em; color: #4a3320; text-decoration: none; white-space: nowrap; }
.hcl-nav { display: flex; gap: 22px; }
.hcl-nav--left { justify-self: start; }
.hcl-nav--right { justify-self: end; }
.hcl-nav a { position: relative; font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6b5237; text-decoration: none; padding: 4px 0; }
.hcl-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: #4a3320; transition: right .3s ease; }
.hcl-nav a:hover { color: #4a3320; }
.hcl-nav a:hover::after { right: 0; }

.hcl-scroll { height: 100%; overflow-y: auto; scrollbar-width: thin; }
.hcl-hero { min-height: 320px; display: grid; place-content: center; text-align: center; padding: 96px 24px 40px; color: #4a3320; }
.hcl-hero__kicker { font-family: "Segoe UI", sans-serif; margin: 0 0 12px; font-size: 11px; letter-spacing: .32em; color: #a98855; }
.hcl-hero h1 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: .04em; }
.hcl-hero__sub { font-family: "Segoe UI", sans-serif; margin: 14px auto 0; max-width: 380px; font-size: 13px; line-height: 1.8; color: #6f5840; }

.hcl-strip { height: 150px; }
.hcl-strip--a { background: linear-gradient(135deg, #d8c3a3, #a98a63); }
.hcl-strip--b { background: linear-gradient(135deg, #cdbfa6, #8f7a5c); }
.hcl-note { padding: 30px 26px 80px; }
.hcl-note p { font-family: "Segoe UI", sans-serif; max-width: 520px; margin: 0 auto; font-size: 13.5px; line-height: 1.9; color: #6b5237; }

@media (prefers-reduced-motion: reduce) { .hcl-head, .hcl-nav a::after { transition: none; } }

JavaScript

// （デモと同じフックを流用）スクロールでヘッダーに影を付ける
(() => {
  const sc = document.getElementById('hclScroll');
  const head = document.getElementById('hclHead');
  if (!sc || !head) return;
  const apply = () => head.classList.toggle('is-stuck', sc.scrollTop > 30);
  let ticking = false;
  sc.addEventListener('scroll', () => {
    if (ticking) return; ticking = true;
    requestAnimationFrame(() => { apply(); ticking = false; });
  }, { passive: true });
  apply();
  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  let auto = !reduce, dir = 1;
  ['wheel', 'touchstart', 'pointerdown'].forEach(ev => sc.addEventListener(ev, () => { auto = false; }, { passive: true }));
  if (auto) {
    setTimeout(function step() {
      if (!auto) return;
      const max = sc.scrollHeight - sc.clientHeight;
      sc.scrollTop += dir * 1.5;
      if (sc.scrollTop >= Math.min(max, 200)) dir = -1; else if (sc.scrollTop <= 0) dir = 1;
      requestAnimationFrame(step);
    }, 900);
  }
})();

実装ガイド

使いどころ

ファッション・ホテル・レストラン・カフェなど、上品さや世界観を大切にするブランドサイトに。中央にロゴ、ナビを左右に振り分けたクラシックで端正なヘッダーです。

実装時の注意点

3カラムの grid（1fr auto 1fr）でロゴを中央、ナビを両端に配置します。ホバーの下線は ::after の right を 100%→0 へ動かして左から伸ばす表現。スクロールで is-stuck を付け、影と背景の不透明度を上げて固定感を出します。

対応ブラウザ

grid・擬似要素アニメーション・backdrop-filter は全モダンブラウザで対応します。backdrop-filter は Safari 向けに -webkit- を併記済みです。

よくある失敗

ロゴが長いと左右ナビと衝突するため、中央カラムを auto にして可変幅にすること。モバイルでは3カラムが破綻するので、ハンバーガー＋中央ロゴへ切り替える設計が前提です。明朝・セリフ系フォントは可読サイズを下げすぎないよう注意。

応用例

スクロールで左寄せロゴ＋コンパクト化へ変形させる、ナビにドロップダウンを足す、中央ロゴをアイコンとワードマークで切り替える、といった展開ができます。

コード