中央寄せロゴ + 左右ナビ
このヘッダーは、ブランド名を画面中央に大きく置き、その左右にナビゲーションを振り分けた 三分割レイアウト です。CSS の grid-template-columns:1fr auto 1fr で左ナビ・中央ロゴ・右ナビを均等に並べ、ロゴが常に視線の中心へ来るよう設計されています。
このパーツの使いどころと実装ポイント
このヘッダーは、ブランド名を画面中央に大きく置き、その左右にナビゲーションを振り分けた三分割レイアウトです。CSS の grid-template-columns:1fr auto 1fr で左ナビ・中央ロゴ・右ナビを均等に並べ、ロゴが常に視線の中心へ来るよう設計されています。新聞や雑誌の題字を思わせる構図で、装飾を足さずとも格式が出るのが特徴です。
向いている場面
出版社やファッションブランド、ギャラリー、ホテルなど、第一印象で品位を伝えたいサイトに馴染みます。会員登録・ログインといった機能リンクを右側へ寄せ、コンテンツ導線（新着・特集・ジャンル）を左側へ置くと、役割の違いが視覚的に整理されます。
カスタマイズと注意点
- 中央ロゴの
letter-spacingを広げると、より落ち着いた印象になります - 本文フォントは Georgia 系。和文ブランドなら明朝系へ差し替えると世界観が揃います
- 左右のリンク数が偏ると中央のロゴがずれて見えるため、数を近づけるか余白で調整します
スマートフォンでは三分割が窮屈になるため、ハンバーガーボタン（aria-label 付き）でナビを格納する切り替えを忘れずに実装してください。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
左右のナビのリンク数が違っても中央ロゴはずれませんか？
grid の 1fr auto 1fr で左右の列幅を均等に確保しているため、ロゴ自体は中央に保たれます。ただしリンク数が大きく偏ると見た目のバランスが崩れて見えるので、左右の項目数を近づけるか、少ない側に余白を入れて調整すると整います。
ロゴを画像にしたい場合はどうすればよいですか？
中央のテキスト部分を img 要素に差し替え、alt にブランド名を入れてください。高さを揃えるため画像に明示的な height を指定し、左右ナビの行の高さと釣り合うようにすると、中央軸の整った印象を保てます。