固定ヘッダー
ナビ ／ パターン集トップ
スクロール後も主要ナビを残す。高さはコンパクトに保つ
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<header class="site-header">
<div class="site-header__inner page">
<a class="site-header__logo" href="/">つばめ珈琲</a>
<nav class="site-header__nav" aria-label="主要">
<a href="#work">この店の仕事</a>
<a href="#plan">定期便</a>
<a class="site-header__cta" href="#contact">相談</a>
</nav>
</div>
</header>/* ページ内リンクの着地点を、帯の高さぶん下げる。
scroll-padding は html に置く。body に書いても効かない */
html {
scroll-padding-block-start: calc(3.5rem + var(--space-4));
}
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 100;
background: color-mix(in srgb, var(--color-bg) 92%, transparent);
backdrop-filter: blur(8px);
border-block-end: 1px solid var(--color-border);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-block-size: 3.5rem;
}
.site-header__logo {
display: inline-flex;
align-items: center;
min-block-size: 2.75rem;
font-weight: 700;
color: var(--color-text);
text-decoration: none;
}
.site-header__nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2); /* 隣り合う当たり判定のあいだに 8px 残す */
margin-inline-end: calc(var(--space-3) * -1); /* 端の項目の内側余白を戻し、文字を版面の右端に揃える */
}
/* 文字の大きさは変えずに、押せる範囲だけを 44px 角へ広げる。
44px は 3.5rem の帯に収まるので、ヘッダーの背丈は変わらない。
間隔は gap から padding へ移しただけで、帯の横幅も増えない */
.site-header__nav a {
display: inline-flex;
align-items: center;
min-block-size: 2.75rem;
padding-inline: var(--space-3); /* 「相談」の2文字でも横 44px に届く */
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--text-sm);
}
.site-header__nav a:hover {
color: var(--color-text);
}
.site-header__nav a.site-header__cta {
color: var(--color-accent-text);
font-weight: 700;
}確認する#
- ナビの行き先（#work #plan #contact）が、同じページの id として実在する
- 固定ヘッダーの高さ分の scroll-padding-block-start を html に置いている（body では効かない）
- ロゴとCTAが375pxで潰れず、押せる範囲が縦横とも44px以上ある
- 背景が半透明でも文字が4.5:1