テキスト付きディバイダー
区切り線の中央に文字を置いた テキスト付きディバイダー です。「OR」「または」などの言葉を挟みながら、コンテンツを優しく分けます。仕組みは display:flex でテキストを中央に置き、左右に ::before と ::after の疑似要素で線を作る構成です。
解説
区切り線の中央に文字を置いたテキスト付きディバイダーです。「OR」「または」などの言葉を挟みながら、コンテンツを優しく分けます。仕組みは display:flex でテキストを中央に置き、左右に ::before と ::after の疑似要素で線を作る構成です。それぞれに flex:1 を与えることで、文字の幅に応じて両側の線が自動的に等しく伸び縮みし、常に中央でバランスが取れます。
使う場面
- ログイン画面の「または SNS で続ける」の区切り
- 記事内のセクションの切れ目
- フォームで複数の選択肢を分ける箇所
線の色や太さは ::before ::after の background と height:1px で調整でき、文字との間隔は gap:14px で変えられます。文字色は color:#888、字間は letter-spacing で詰まり具合を整えます。線をグラデーションや破線にすればより装飾的にできます。中央の文字は実際の意味を持つテキストにしておくと、スクリーンリーダーでも区切りの意図が伝わります。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
左右の線が常に中央で揃うのはなぜですか
両側の線（::before と ::after の疑似要素）に flex:1 を指定しているためです。文字の幅を除いた残りの空間を線が均等に分け合うので、文字がどんな長さでも中央に保たれます。
線の色や太さを変えるには
::before と ::after の background で色を、height:1px で太さを変更します。background をグラデーションにしたり、border の dashed を使えば破線にもでき、装飾の幅が広がります。