コンテナクエリによるレスポンシブナビゲーションバー

コンテナクエリによるレスポンシブナビゲーション

コンテナクエリを使うと、全幅ヘッダー、サイドバー、狭いパネルなど、利用可能なスペースに適応するナビゲーションコンポーネントを構築できます。

CSS

.nav-container {
  container: nav / inline-size;
}

/* デフォルト：ハンバーガーメニュー */
.nav-full { display: none; }
.nav-hamburger { display: flex; }

/* 中間：コンパクトラベル */
@container nav (min-width: 500px) {
  .nav-full {
    display: flex;
    gap: 0.5rem;
  }
  .nav-hamburger { display: none; }
  .nav-label { display: none; }
  .nav-icon { display: block; }
}

/* 広い：フルラベル */
@container nav (min-width: 800px) {
  .nav-label { display: inline; }
}

3つの状態

1. 狭い（< 500px）：ハンバーガー/メニューボタンのみ表示。狭いパネルに適しています。
2. 中間（500-799px）：アイコンは表示されますがテキストラベルは非表示。コンパクトですが機能的。
3. 広い（800px+）：アイコンとラベル付きのフルナビゲーション。

コンテナクエリが優れている理由

ナビゲーションコンポーネントは以下に表示される可能性があります：

• 全幅ヘッダー（ビューポート = 1400px、nav = 1200px）
• サイドバーパネル（ビューポート = 1400px、nav = 250px）
• モバイルレイアウト（ビューポート = 375px、nav = 375px）

メディアクエリでは各コンテキストに異なるブレークポイントが必要ですが、コンテナクエリならnavは受け取るスペースに適応します。