ロゴ + ハンバーガーのみの極小ヘッダー
左にロゴ、右にハンバーガーアイコンだけを置いた、要素を絞り込んだヘッダーです。 display:flex と justify-content:space-between でロゴとボタンを両端に振り分け、ナビゲーションのリンクを常時表示しないことで、本文に集中できる静かな見た目を作ります。
このパーツの使いどころと実装ポイント
左にロゴ、右にハンバーガーアイコンだけを置いた、要素を絞り込んだヘッダーです。display:flexとjustify-content:space-betweenでロゴとボタンを両端に振り分け、ナビゲーションのリンクを常時表示しないことで、本文に集中できる静かな見た目を作ります。下辺の細いボーダーだけで区切る軽量な構造です。
向いている場面
- 読むことが主役のブログやオウンドメディアの記事ページ
- 余白を活かしたミニマルなポートフォリオやギャラリー
- 項目数が多く、横並びメニューだと窮屈になるサイト
カスタマイズと注意点
ハンバーガーは3本のspanを縦に並べただけなので、タップで開くメニュー本体（ドロワーやオーバーレイ）は別途用意します。ボタンにはaria-labelでメニューであることを伝え、開閉状態はaria-expandedで示すとスクリーンリーダーに親切です。タップ領域は最低でも44px四方を確保し、指で押しやすくします。ロゴのフォントや文字間（letter-spacing）を変えるだけでブランドの印象を大きく調整でき、背景色や境界線の色をサイトのトーンに合わせれば馴染みます。
よくある質問
メニューを開くにはどうすればいいですか
このパーツはハンバーガーボタンの見た目だけを提供します。クリックで開くドロワーやオーバーレイメニューは別途用意し、ボタンのクリックで表示を切り替えるJavaScriptを追加してください。
ナビが少ないので横並びメニューにしたいです
リンクが3〜5個程度ならハンバーガーをやめ、ロゴの隣に直接リンクを並べるほうが操作の手数が減ります。項目が多い記事サイトや多階層メニューのときにこの極小ヘッダーが活きます。