二重下線見出し
二重下線見出しは、テキストの上下に細い線を 1 本ずつ引き、格式と落ち着きを演出する見出し装飾です。 border-top と border-bottom をどちらも 1px の細線にし、 padding で上下左右に余白を確保することで、線とテキストが詰まらず上品に見えます。
解説
二重下線見出しは、テキストの上下に細い線を 1 本ずつ引き、格式と落ち着きを演出する見出し装飾です。border-top と border-bottom をどちらも 1px の細線にし、padding で上下左右に余白を確保することで、線とテキストが詰まらず上品に見えます。明朝系の Noto Serif JP と広めの letter-spacing:.2em を組み合わせ、文字をゆったり配置している点が雰囲気づくりの要です。
合うサイト・調整方法
士業・コーポレート・高級ブランドなど、信頼感やフォーマルさを出したい場面に向きます。英字の見出しと特に相性がよく、和文でも字間を広げることで端正にまとまります。
- 線を強調したいときは色を濃く、太さを 2px に
- 字間は
letter-spacingで広げすぎないよう調整 - 明朝以外にしたい場合はフォント指定を差し替え
CSS だけで完結し JS は不要です。余白を詰めすぎると窮屈に見えるため、padding はやや広めに保つのが上品に見せるコツです。装飾は静的で動きがなく、どんな背景色でも破綻しにくい汎用性の高いスタイルです。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
和文の見出しでも使えますか。
使えます。デモは英字ですが、letter-spacing を広めに保てば和文でも端正にまとまります。明朝系フォントとの相性がよく、フォーマルな印象になります。
上下の線の間隔はどう調整しますか。
テキストと線の距離は padding の上下の値で決まります。数値を増やすとゆったり、減らすと引き締まった見た目になります。詰めすぎると窮屈になるので、やや広めがおすすめです。