下線装飾付きセクション見出し
これは見出しの下に短いアクセントラインを添えた、コーポレートで定番のセクションタイトルです。日本語の主見出し（ h2 ）の下に ::after で幅 48px の小さな線を中央寄せで置き、その下に英字のサブラベルを小さく添える二段構成になっています。アニメーションはなく、CSS のみのシンプルな静的装飾です。
解説
これは見出しの下に短いアクセントラインを添えた、コーポレートで定番のセクションタイトルです。日本語の主見出し（h2）の下に::afterで幅 48px の小さな線を中央寄せで置き、その下に英字のサブラベルを小さく添える二段構成になっています。アニメーションはなく、CSS のみのシンプルな静的装飾です。
線はposition:absoluteとleft:50%＋translateX(-50%)で中央に固定しているため、見出しの文字数が変わっても常に中央に揃います。
使う場面とカスタマイズ
- サービス紹介・会社概要・実績など各セクションの先頭見出し
- 線の色は
::afterのbackground、長さはwidthで変更 - 英字サブラベルは
letter-spacingで字間の広さを調整
シンプルゆえ汎用性が高く、本文の読みやすさを邪魔しません。注意点として、英字サブラベルはあくまで装飾なので、見出しの意味は日本語側で完結させてください。h2の階層は文書構造に合わせ、ページ内で見出しレベルを飛ばさないようにすると SEO 上も健全です。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
下線の色や長さを変えられますか
変えられます。h2 の ::after が下線部分で、background がアクセントカラー、width が線の長さ（標準 48px）です。ブランドカラーに合わせて色を変え、線を長くしたい場合は width を増やしてください。中央寄せはそのまま保たれます。
英語のサブ見出しは必須ですか
必須ではありません。udt__sub は装飾目的の英字ラベルなので、不要なら削除しても見出しと下線だけで成立します。残す場合も意味は日本語の h2 側で完結させ、英字は雰囲気づけの補助として扱うのが安全です。