両側に線が伸びるセンタータイトル
このスニペットは、見出しテキストの左右に細い水平線が伸びるセンタータイトルです。JavaScript は使わず、見出しを display:flex で横並びにし、 ::before と ::after の擬似要素に flex:1 を与えて、テキストの両脇の余白いっぱいに height:1px のラインを引いています…
解説
このスニペットは、見出しテキストの左右に細い水平線が伸びるセンタータイトルです。JavaScript は使わず、見出しを display:flex で横並びにし、::before と ::after の擬似要素に flex:1 を与えて、テキストの両脇の余白いっぱいに height:1px のラインを引いています。min-width:60px を指定しているため、文字が長くても短くても線が破綻しません。
使うと映える場面
- BtoB サイトや士業系の「About Us」「Service」などのセクション区切り
- 会社案内・採用ページの落ち着いた中見出し
- 左右対称でかっちり見せたいランディングページのブロック見出し
カスタマイズは簡単です。線の色は擬似要素の background、太さは height を変えるだけで調整でき、文字と線の間隔は gap で詰めたり広げたりできます。色を本文より薄いグレーにすると上品に、ブランドカラーにすると主張が強まります。アニメーションを含まないため パフォーマンスへの負荷はほぼゼロで、動きが苦手な閲覧者にも安全に使えます。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
線の色や太さは変えられますか？
はい。.lf-title::before と .lf-title::after の background で色を、height で太さを変えられます。1px のままだと繊細に、2〜3px にすると力強い印象になります。
JavaScript は必要ですか？
不要です。flex と擬似要素だけで成立する純粋な CSS 実装なので、コピーするだけで動きます。古いブラウザでも flex 対応であれば問題なく表示されます。