実践 - ヘッダー・ナビ制作

実践ヘッダー・ナビ — header/nav構造からハンバーガーメニューまで

Webサイトのヘッダーとナビゲーションは、ユーザーが最初に目にするUIであり、「このサイトはどんなサイトか」「どこへ行けるか」を瞬時に伝える役割を担います。見た目の美しさだけでなく、セマンティックなHTMLマークアップ・スマートフォン対応のハンバーガーメニュー・スクロール追従するスティッキーヘッダー・アクセシビリティ対応まで、実務レベルのヘッダーを構築するには複数の技術要素を組み合わせる必要があります。このレッスンでは、実際に使えるコードを交えながら、ヘッダー・ナビゲーションの完全実装を段階的に学びます。

ヘッダー・ナビゲーション — 4つの構成パターン

---

セマンティックHTMLによるheader/nav構造

なぜセマンティックHTMLが重要なのか

HTMLには「意味を持つタグ（セマンティックタグ）」と「意味を持たないタグ」があります。<div>や<span>はレイアウト用の汎用タグですが、<header>・<nav>・<main>・<footer>は文書構造に意味を付与します。セマンティックなマークアップにより、検索エンジンのクローラーがページ構造を正確に理解し、スクリーンリーダーがユーザーにナビゲーション情報を適切に読み上げることができます。

基本のHTML構造

ヘッダーとナビゲーションの推奨マークアップ構造は以下の通りです。

<header class="site-header">
  <div class="header-inner">
    <a href="/" class="logo" aria-label="サイトトップへ">
      <img src="/images/logo.svg" alt="会社ロゴ" width="120" height="40">
    </a>
    <nav role="navigation" aria-label="メインナビゲーション">
      <ul class="nav-list">
        <li><a href="#about">About</a></li>
        <li><a href="#works">Works</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <button class="hamburger" aria-expanded="false" aria-controls="nav-menu" aria-label="メニューを開く">
      <span></span><span></span><span></span>
    </button>
  </div>
</header>

各要素の役割

💡 ロゴ画像の<a>タグにはaria-label="サイトトップへ"を付けましょう。画像のaltテキストだけではスクリーンリーダーがリンクの目的を読み上げにくいケースがあります。アクセシビリティ対応はSEO評価にも直結します。

---

ヘッダーのCSSレイアウト

ロゴ左・ナビ右の基本パターン

最も汎用的なヘッダーレイアウトはFlexboxを使った「ロゴ左寄せ・ナビ右寄せ」です。

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-list {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  text-decoration: none;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-list a:hover {
  color: #2563eb;
}

---

ハンバーガーメニューの実装

ハンバーガーボタンのCSS

3本線のアイコンはHTML <span> 3つとCSSで作ります。画像やアイコンフォントを使わないため読み込みが速く、CSSアニメーションで×印への変形も簡単に実装できます。

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #334155;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* 開いた状態: ×に変形 */
.hamburger.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* モバイル時にハンバーガーを表示 */
@media (max-width: 767px) {
  .hamburger { display: flex; }
  .nav-list {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-list.open { max-height: 300px; }
  .nav-list li a { display: block; padding: 16px 24px; }
}

JavaScriptでの開閉制御

ハンバーガーボタンをクリックしたときにメニューを開閉するJavaScriptです。aria-expandedの値も更新することでアクセシビリティを担保します。

const hamburger = document.querySelector('.hamburger');
const navList = document.querySelector('.nav-list');

hamburger.addEventListener('click', () => {
  const isOpen = hamburger.classList.toggle('open');
  navList.classList.toggle('open');
  hamburger.setAttribute('aria-expanded', isOpen);
  hamburger.setAttribute('aria-label', isOpen ? 'メニューを閉じる' : 'メニューを開く');
});

// ナビリンクをクリックしたらメニューを閉じる
navList.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    hamburger.classList.remove('open');
    navList.classList.remove('open');
    hamburger.setAttribute('aria-expanded', 'false');
  });
});

⚠️ ハンバーガーボタンには必ず<button>タグを使ってください。<div>や<span>をクリック可能にするとキーボード操作やスクリーンリーダーで認識されません。<button>タグはデフォルトでTabキーフォーカスとEnterキー操作に対応しています。

---

スティッキーヘッダーの実装

CSSだけで実現するスティッキー

position: stickyはJavaScriptなしでスクロール追従を実現できます。ただし、親要素にoverflow: hiddenやoverflow: autoが設定されているとstickyが機能しないため注意が必要です。

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* スクロール後に背景を半透明化 */
  transition: background-color 0.3s, box-shadow 0.3s;
}

.site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

スクロール検知JavaScript

const header = document.querySelector('.site-header');

window.addEventListener('scroll', () => {
  if (window.scrollY > 80) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
}, { passive: true });

💡 { passive: true } オプションをスクロールイベントリスナーに追加することで、ブラウザはスクロール処理を最適化しページのスクロールがスムーズになります。スクロール系のイベントには常にpassive: trueを付ける習慣をつけましょう。

---

スティッキーヘッダーとアンカーリンクの競合解消

スティッキーヘッダーがある場合、アンカーリンク（href="#section"）でページ内移動するとヘッダーの高さ分だけコンテンツが隠れてしまいます。これはCSSのscroll-margin-topで解消できます。

section {
  scroll-margin-top: 80px; /* ヘッダーの高さに合わせる */
}

---

🏋️実践ワーク

1. ◆index.htmlとstyle.cssを新規作成し、<header>・<nav>・<ul>・<li>・<a>のセマンティック構造でヘッダーをマークアップしてください。
2. ◆CSSでFlexboxを使い、ロゴ左・ナビ右のレイアウトを実装してください。justify-content: space-betweenとalign-items: centerを使います。
3. ◆幅768px未満でハンバーガーアイコンが表示され、デスクトップナビが非表示になるメディアクエリを書いてください。
4. ◆JavaScriptでハンバーガーボタンのクリックイベントを実装し、aria-expandedの値も正しく切り替えてください。
5. ◆position: stickyとscrollイベントを使い、スクロール80px後にヘッダー背景が半透明になるスティッキーヘッダーを実装してください。

📝まとめ

ヘッダーとナビゲーションは<header>・<nav>・role・aria-labelのセマンティックマークアップを基盤とし、FlexboxでロゴとナビをSpace-betweenに配置します。ハンバーガーメニューは<button>タグ・CSSのmax-heightトランジション・JavaScriptのclassList.toggleの組み合わせで実装し、aria-expandedでアクセシビリティを確保します。スティッキーヘッダーはposition: stickyとスクロールイベントで実現し、アンカーリンクの隠れ問題はscroll-margin-topで解消します。次のレッスンではこのヘッダーをグリッドレイアウトのカードセクションと組み合わせて、実践的なページ構成を学びます。