ロゴ中央 上下ナビヘッダー
ロゴを中央に大きく配置し、上段にユーティリティ（言語切替・問い合わせ）、下段にメインナビを置いた 2 段組ヘッダーです。全体を text-align:center で中央寄せにし、上段だけ justify-content:flex-end で右に寄せています。
このパーツの使いどころと実装ポイント
ロゴを中央に大きく配置し、上段にユーティリティ（言語切替・問い合わせ）、下段にメインナビを置いた 2 段組ヘッダーです。全体を text-align:center で中央寄せにし、上段だけ justify-content:flex-end で右に寄せています。ロゴを主役に据えられるため、企業の格式やブランドの存在感を打ち出したいサイトに向きます。
向いている場面
- 老舗企業やコーポレートサイトのトップ
- ブライダル・士業・クリニックなど信頼感を重視する業種
- 多言語対応が必要な施設やメーカー
ナビ項目は gap で等間隔に並ぶので、4〜5 項目までが収まりよく見えます。項目が増える場合は文字を小さくするより、ドロップダウンにまとめる方が中央配置の端正さを保てます。
実装上の注意
2 段構成は縦方向に高さを取るため、狭い画面ではロゴ・上段・ナビが詰まって見えます。一定幅以下ではナビをハンバーガーメニューに畳む設計を用意しておくと安全です。中央ロゴはテキストですが、画像ロゴにする場合は alt に社名を入れ、上下の余白（padding）を保って窮屈にならないようにしてください。
よくある質問
ナビ項目が6個以上ある場合はどうすればよいですか。
中央配置は項目が多いと横に広がり中央のバランスが崩れます。関連項目をドロップダウンにまとめて表示数を4〜5に抑えるか、思い切って左右振り分けのレイアウトに変える方が読みやすくなります。
スマートフォンでも2段のまま表示すべきですか。
縦に高さを取るため、狭い画面では上段ユーティリティとナビを畳むのがおすすめです。ロゴを中央に残しつつ右にメニューボタンを置き、タップで開く構成にすると省スペースで操作しやすくなります。