章見出しの帯
LPの節 ／ パターン集トップ
章の始まりを告げる帯。章番号・見出し・リード・id を書き換えて節ごとに繰り返す
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<!-- 章番号・見出し・リード・id の4つは、貼るたびに節の中身へ書き換える。
id は「sec-」にその節の id をつないだ名前にする。
下は id="plan" の節（料金）の頭に置いた例 -->
<header class="sec-head page">
<p class="sec-head__num" aria-hidden="true">03</p>
<h2 class="sec-head__title" id="sec-plan">豆の定期便</h2>
<p class="sec-head__lead">毎月10日に焙煎して、その日のうちに送ります。</p>
</header>.sec-head {
border-block-start: 2px solid var(--color-text);
margin-block: var(--space-9) var(--space-6); /* 上を下より広く。帯は次の本文に属する */
padding-block-start: var(--space-5);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--space-4);
row-gap: var(--space-2);
align-items: baseline;
}
.sec-head__num {
margin: 0;
font-size: var(--text-xl);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--color-accent-text);
}
.sec-head__title {
margin: 0;
font-size: var(--text-xl);
line-height: var(--leading-heading);
}
.sec-head__lead {
margin: 0;
grid-column: 2; /* 折り返しは章番号の隣、2列目の幅で決まる */
color: var(--color-text-muted);
}確認する#
- 2つめ以降の帯で、章番号・見出し・リード・id の4つを書き換えている
- id が1ページに1つしかない（帯を貼るたびに sec-plan、sec-faq と変える）
- 章番号は装飾なら aria-hidden、意味があるなら見出しの文字列に含めている
- リードは1文で、見出しの言い換えになっていない
- 帯の上余白が下より広く、前の章との切れ目が見える