本文へ移動

メニュー

ヘッダーコンテナ概要

スクリーンショット:ヘッダーコンテナの3つのパターン。

ヘッダーコンテナは、ヘッダーに含まれるアイテムとして使う、さまざまなコンポーネントが内包されます。
多くのコンポーネントを格納可能であるため、エリアで区切って示しています。

仕様

ワイド

フル

スクリーンショット:フル幅のヘッダーコンテナの例。①ロゴが左上部にある。②ヘッダーコンテナアイテムがロゴの右側を右端まで埋めている。③グローバルメニューがその下部にあり、ロゴとヘッダーコンテナアイテムを跨ぐように配置されている。

スリム

スクリーンショット:フル幅のヘッダーコンテナの例。①ロゴが左部にある。②ヘッダーコンテナアイテムが右部にある。③グローバルメニューがロゴのヘッダーコンテナアイテムの間を埋めるように配置されている。

ミディアム

スクリーンショット:ミディアム幅のヘッダーコンテナの例。①ロゴが左部にある。②ヘッダーコンテナアイテムがロゴの右側にあり、右端の④ハンバーガーメニューボタンまでの間を埋めるように配置されている。
スクリーンショット:ミディアム幅のヘッダーコンテナの例。①ロゴが左部にある。④ハンバーガーメニューボタンが右端に配置されている。

コンパクト

スクリーンショット:スリム幅のヘッダーコンテナの例。①ロゴが左部にある。④ハンバーガーメニューボタンが右端にある。②ヘッダーコンテナアイテムがハンバーガーメニューボタンの左部に配置されている。
スクリーンショット:スリム幅のヘッダーコンテナの例。①ロゴが左部にある。④ハンバーガーメニューボタンが右端に配置されている。
①ロゴ
②ヘッダーコンテナアイテム

ヘッダーコンテナアイテムのエリアには、ヘッダーコンテナ内のあらゆる汎用的なコンポーネントが内包されます。たとえば、以下のようなコンポーネントです。

  • ユーティリティリンク
  • ランゲージセレクター
  • 検索ボックス【今後、提供予定】
  • 新規登録/ログイン/ログアウトボタン【今後、提供予定】
③グローバルメニュー
④ハンバーガーメニューボタン

画面幅の狭いデバイスでヘッダーコンテナアイテムやグローバルメニューを内包するための、メニューパネル開閉ボタンです。