大きな番号付きセクション見出し
大きな番号と本見出しを組み合わせた、構造的なセクションタイトルです。 display:flex で「01」の番号部分と本文ブロックを横並びにし、番号は等幅フォント（ SF Mono 系）で font-size:64px と大きく見せています。
解説
大きな番号と本見出しを組み合わせた、構造的なセクションタイトルです。display:flex で「01」の番号部分と本文ブロックを横並びにし、番号は等幅フォント（SF Mono 系）で font-size:64px と大きく見せています。本文側は小さなラベル（FEATURE）と <h2> 見出しを縦に積み、手順や項目の順序を一目で伝えられる構成です。
こんなページに向きます
- 「特長 01・02・03」のように順序立てて並べる機能紹介
- サービスの流れ・ステップ解説のセクション見出し
- 料金プランや実績を番号で整理したい LP
番号の色は .num-title__no の color でブランドカラーに差し替えられ、opacity で主張の強さを調整できます。番号を大きくしすぎると本見出しが負けるため、font-size のバランスを見ながら調整してください。装飾的な番号は読み上げの妨げになりやすいので、本当の見出しは <h2> 側に置くのがアクセシビリティ上の正解です。アニメーションがないため軽量で、どのセクションにも安心して反復配置できます。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
番号を「01」以外に変えるには？
HTML の num-title__no の中身を「02」「03」など好きな数字に書き換えるだけです。CSS は共通なので、複数セクションに同じスタイルで番号違いを並べられます。
番号の色をブランドカラーにできますか？
できます。.num-title__no の color を任意の色に変えてください。opacity を下げると控えめに、上げるとアクセントとして強調できます。