番号 + ラベル付き 2 段見出し
上段に「01」のような連番、下段に見出しテキストを縦に並べた 2 段構成の見出しです。 display:flex と flex-direction:column で番号と見出しを縦積みにし、 gap で行間を調整しています。
解説
上段に「01」のような連番、下段に見出しテキストを縦に並べた 2 段構成の見出しです。display:flex と flex-direction:column で番号と見出しを縦積みにし、gap で行間を調整しています。番号は等幅フォント（SF Mono 系）に letter-spacing を効かせ、見出しと色・太さで差を付けることで「章番号」らしい構造的な見え方を作っています。CSS のみで JS は使いません。
向いている場面
- サービス紹介の「01 ヒアリング → 02 設計」といった手順説明
- ランディングページの特徴セクションの章立て
- 料金プランや FAQ をブロックで区切る見出し
番号は HTML の span に直接書くため、各ブロックで 01・02 と振り直します。番号色（color）を主役色に合わせるとブランド感が出ます。見出しの font-size やウェイトを下げれば本文寄りの落ち着いたトーンにも調整可能です。h3 を使っているので、ページ内の見出し階層（h2 の下など）に合わせてタグを選ぶと SEO 上の構造も整います。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
番号の振り方を自動化できますか
このスニペットは span に番号を直接書く方式です。連番を自動採番したい場合は ol と CSS counter を組み合わせる方法もありますが、少数の手順なら手書きが簡単です。
番号のフォントを変えても良いですか
問題ありません。等幅フォントは桁が揃って数字が映えるための指定です。好みで通常フォントや太いセリフ体に変更できます。