シンプルな下線付きタイトル
シンプルな下線付きタイトルは、見出しテキストの下にアクセント色の細い線を 1 本引くだけの、最小構成の装飾です。 border-bottom で太さ 3px の線を引き、 display:inline-block にすることで線の幅を文字の長さにぴったり合わせています。
解説
シンプルな下線付きタイトルは、見出しテキストの下にアクセント色の細い線を 1 本引くだけの、最小構成の装飾です。border-bottom で太さ 3px の線を引き、display:inline-block にすることで線の幅を文字の長さにぴったり合わせています。padding-bottom で文字と線の間隔を確保しているため、窮屈にならず読みやすいのが特徴です。画像も JS も使わず CSS だけで成立します。
調整できるところ
- 線の色は
border-bottomの色をブランドカラーへ変更 - 線を細く・太くしたいときは
3pxの数値を増減 - 文字と線の距離は
padding-bottomで調整
コーポレートサイトのセクション見出しや、サービス紹介の小見出しなど、主張しすぎず整った印象を出したい場面に向きます。inline-block なので中央寄せにしたい場合は親側で text-align:center を指定します。装飾が軽量で動きもないため、表示パフォーマンスや視覚的な負担の面でも扱いやすい定番のスタイルです。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
下線の色をブランドカラーに変えられますか。
はい。CSS の border-bottom に指定した色を自社のアクセントカラーに書き換えるだけです。線の太さも同じ宣言の 3px を増減すれば調整できます。
下線の幅を文字に合わせず横いっぱいにできますか。
display を inline-block から block にすると、見出しの幅いっぱいに線が伸びます。文字の長さに合わせたい場合は inline-block のままにしてください。