ヘッダーとは
- ページ最上部の「帯」
- サイト全体の基準点
- 高さ・構造が安定している前提
👉 ここで辞書⓪の用語を使う：
- 固定枠
- 構造として固定したい箱
ヘッダーの骨組み（レイアウト設計）
よくあるレイアウト例
固定ヘッダー/stickyヘッダー
役割分担
- ヘッダー全体：固定枠（高さを固定）
- 中身： ロゴ：固定枠
- ナビ：レイアウト調整役
- 構造：構造として固定したい箱（崩したくない）
使われる場面
- コーポレートサイト
- ブログなど
コード例
静的ヘッダー
役割分担
- ヘッダー全体：固定枠（高さ固定／通常フロー）
- 中身： ロゴ：固定枠
- ナビ：レイアウト調整役
- CTA：固定枠（潰れたら意味がない）
- 構造：固定（主従が明確）
使われる場面
- ECサイト
- サービス紹介サイト
- 管理画面トップ
役割を決める
- ヘッダー全体（箱）：固定枠
- 中身
- ロゴ：固定枠
- ナビ等：レイアウト調整役
- 構造：崩したくない → grid / flex
👉ここではまだ細かい配置をしない
「誰が何役か」だけ決める
ヘッダー中身のレイアウト（ロゴ・ナビ）
よくあるレイアウト例
左右2分割（最も基本）
[ LOGO ] [ A B C ]
役割分担
- ロゴ：固定枠
- ナビ：レイアウト調整役
- 構造：安定（flex / grid どちらも可）
使われる場面
- コーポレートサイト
- ブログ
- LP
👉 9割のサイトはこれ
コード例
3分割（中央基準）
[ 左 ] [ ロゴ ] [ 右 ]
役割分担
- 左：固定 or 調整役
- ロゴ：固定枠
- 右：固定 or 調整役
- 構造：崩したくない
使われる場面
- ブランドサイト
- EC
👉 grid 向きの典型
コード例
ロゴ＋フル幅ナビ
[ ロゴ ]
[ ナビ（横一列） ]
役割分担
- 上段：固定枠
- 下段：構造固定
使われる場面
- 情報量の多いサイト
- 大規模メディア
👉 高さは増えるが構造は安定
均等配置ナビ(flex+gap)
[ A ] [ B ] [ C ] [ D ]
役割分担
- 各項目：同格
- 並び：flex + gap
使われる場面
- 小規模サイト
- サブナビ
CTA付きヘッダー
[ LOGO ] [ A B ] [ 登録 ]
役割分担
- ロゴ：固定枠
-ナビ：レイアウト調整役
CTA：固定枠（潰れない）
使われる場面
- SaaS
- サービスLP
- CTAを調整役にしないのが重要
コード例
可変ヘッダー（スクロール前提）
[ ロゴ ][ ナビ ][ CTA ]
最初はナビを見せる → 読み始めたら引っ込むという挙動
（スクロールで縮む / 隠れる）
役割分担
- 全体：固定枠
- 中身：調整役あり
- 構造：状態を持つ
👉 sticky / JS 前提
使われる場面
- コンテンツ閲覧が主役のサイト
→ブログや技術ドキュメントなど - モバイルファーストなサービス
→SNS、タスク管理ツール、チャットアプリなど
コード例
モバイル前提(縮めない)
[ ☰ ] LOGO
役割分担
- メニュー：固定枠（アイコン）
- ロゴ：固定枠
- ナビ：表示しない（折りたたみ）
使われる場面
- モバイルファースト設計
- 初期から折りたたみ前提
- レスポンシブ分岐で登場（実装は後続記事）
コード例
ポイント（共通）
- flex を使う
- 誰が「残り」を持つか決める
- max-width を使う：帯の中身(container)は
margin:0 auto;で中央揃え - padding で余白を作る
ロゴの扱い
- 固定枠
- 中身サイズ基準
- 潰れない
ex.CSS
.logo
{
flex-shrink: 0;
}
👉 「固定枠」の具体例
ナビゲーションの扱い
- レイアウト調整役
- 余白を引き取る
=「ロゴは必要な分だけ使い、残ったスペースはナビが全部使う」
Ex.css
.nav {
flex: 1;
display: flex;
justify-content: flex-end;
}
👉 「レイアウト調整役」の具体例
NG・注意点
%で割る
Ex.css
.logo { width: 30%; }
.nav { width: 70%; }
- 文字が増えたら nav が足りない
- padding 足した瞬間に 100% 超える
- 「比率が正しそう」に見えて一番壊れやすい
全員に width を持たせる
ex.css
.logo { width: 200px; }
.nav { width: 800px; }
- 画面が狭いと即破綻
- スマホ対応不可
- 「誰も縮まなれない」設計は事故る
高さを固定して中央寄せに line-height
Ex.css
.header-right a {
height: 65px;
line-height: 65px;
}
高さ65pxの箱に行の高さも65pxにして文字を縦中央っぽく見せてる
→テキストが2行になるとアウトだし、フォントサイズを変えた瞬間にズレる
スマホでタップ領域がズレる危険性もアリ
sticky / fixed を使うとき
- 高さ固定前提
- z-index
- overflowとの関係
ロゴ画像が想定より大きい
防御策
Ex.css
.logo img {
max-height: 40px;
width: auto;
}
ロゴは高さ基準で制御
翻訳で nav がはみ出る
防御策
- menu に gap + 折り返し設計
- login に nowrap + ellipsis
ログインが2行になる
防御策
ex.css
.login a {
white-space: nowrap;
}
sticky + 他position で重なり事故
発生条件
Ex.css
.header {
position: sticky;
top: 0;
}
防御策
Ex.css
.header {
position: sticky;
top: 0;
z-index: 1000;
}
flex:1 は便利だが、使いすぎないことが注意点！
- 余白の責任者が増えすぎると挙動が読めなくなる
- 原則余白を引き取る役は1か所だけ
→nav / main など「バッファ役」に限定
ヘッダーで z-index が必要になる瞬間
Ex.css
.header {
position: sticky;
top: 0;
z-index: 1000;
}
- モーダル
- ドロップダウン
- 他セクションが overlap する
👉 position を持った瞬間 z-index を意識する
nav の中は「ul/li」を使う
今は便宜上div + a だけど、実務だとこっちが基本↓
Ex.ma
<nav>
<ul class="menus">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</nav>
- 複数の同列リンク → リスト構造
- スクリーンリーダーに優しい
- CSS指定もしやすい
👉 「見た目じゃなく、意味でタグを選ぶ」
レスポンシブ時の考え方(実装は後継の記事へ)
- ナビを縮め続けない
- 限界が来たら「畳む」
- 構造を変える判断