進め方の3ステップ
LPの節 ／ パターン集トップ
進め方3ステップ。olとcounterで番号を自動にする
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<section class="steps page" id="flow" aria-labelledby="steps-title">
<h2 id="steps-title">定期便のはじめかた</h2>
<ol class="steps__list">
<li class="steps__item">
<h3>選ぶ</h3>
<p>産地と量を選んで申し込みます。初回が届くまで、お代はいただきません。</p>
</li>
<li class="steps__item">
<h3>焙煎して送る</h3>
<p>毎月10日に焙煎し、その日のうちに発送します。追跡番号はメールでお知らせします。</p>
</li>
<li class="steps__item">
<h3>変える・休む</h3>
<p>産地も量も、次の便から変えられます。休むときは前月の末日までにご連絡ください。</p>
</li>
</ol>
</section>.steps__list {
list-style: none;
margin: var(--space-6) 0 0;
padding: 0;
counter-reset: step;
display: grid;
gap: var(--space-6);
}
.steps__item {
counter-increment: step;
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: var(--space-2) var(--space-4);
}
.steps__item::before {
content: counter(step);
grid-row: 1 / 3;
inline-size: 2.5rem;
block-size: 2.5rem;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--color-accent-text);
color: var(--color-on-accent);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.steps__item h3 {
margin: 0;
font-size: var(--text-base);
align-self: center;
}
.steps__item p {
margin: 0;
grid-column: 2;
color: var(--color-text-muted);
}確認する#
- 番号は ol と counter の自動連番で、手打ちの数字がない
- 円の中の数字は文字なので4.5:1以上ある（図形の3:1では足りない）
- ステップ間の余白がステップ内より広く、区切りで読める