テキストのみのヒーロー
ヒーロー ／ パターン集トップ
写真がないLPや資料の冒頭。余白と級数差だけで主張する
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<header class="hero-text page">
<p class="hero-text__label">常盤野市中町の自家焙煎</p>
<h1><span>豆の名前を、</span><span>覚えて帰る店</span></h1>
<p class="hero-text__lead"><span>浅煎りから深煎りまで9か国。</span><span>好みをうかがって、その場で挽きます。</span></p>
<div class="hero-text__actions">
<a class="button button--secondary" href="#plan">定期便を見る</a>
<a class="button button--ghost" href="#work">この店の仕事</a>
</div>
</header>.hero-text {
padding-block: var(--space-9) var(--space-8);
border-block-end: 1px solid var(--color-border);
}
.hero-text__label {
margin: 0 0 var(--space-3);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.hero-text h1 {
margin: 0 0 var(--space-4);
font-size: clamp(var(--text-xl), 1.2rem + 2vw, var(--text-2xl));
text-wrap: balance;
}
/* 幅で折らずに、折ってよい位置を句のかたまりで示す。
版面が狭まったときだけ、この境目で切れる */
.hero-text h1 span,
.hero-text__lead span {
display: inline-block;
}
.hero-text__lead {
margin: 0 0 var(--space-6);
color: var(--color-text-muted);
}
.hero-text__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
/* .button の基底と派生は「出発点のCSS」にある */確認する#
- 見出しの上余白が下の2倍以上
- ボタンを2つ並べるなら、枠（--secondary）と文字だけ（--ghost）で強さを変える
- 塗りのボタン（--primary）はここに置かず、締めのCTAに取っておく
- 2つのボタンの行き先が、同じページにある節の id を指している