ラベル付き区切り線
ラベル付き区切り線は、左右にまっすぐな線を引き、その中央に「または」などの短い言葉を挟んだ仕切り部品です。仕組みは flex で中央の文字と両側の線を横並びにし、線は ::before と ::after の疑似要素を flex:1 で伸ばして描いています。
解説
ラベル付き区切り線は、左右にまっすぐな線を引き、その中央に「または」などの短い言葉を挟んだ仕切り部品です。仕組みは flex で中央の文字と両側の線を横並びにし、線は ::before と ::after の疑似要素を flex:1 で伸ばして描いています。文字の左右にだけ余白を取るので、テキストの長さが変わっても線が自動でちょうどよく分かれます。CSS だけで完結し、JavaScript は使いません。
使いどころの例
- ログイン画面で「メールで続ける」と「SNS で続ける」を分ける区切り
- フォームの入力欄とボタン群の間の視覚的な仕切り
- 記事や設定画面でセクションを軽く分けたいとき
中央の文言は HTML の文字を入れ替えるだけで「OR」や「もしくは」などに変えられます。線の色は疑似要素の background で、文字の色や大きさはまとめて指定できます。全体の幅は .dl の width で調整し、置く場所に合わせて広げたり狭めたりできます。線と文字の色を淡くしすぎると背景に埋もれるため、ほどよいコントラストを保つと、仕切りとしての役割がはっきり伝わります。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
中央の文字や線の色を変えられますか
中央の文言は HTML の中身を入れ替えるだけで自由に変えられます。線の色は ::before と ::after の background で、文字の色や大きさは .dl の指定でまとめて調整できます。
幅は固定ですか、可変にできますか
幅は .dl の width で決まります。固定値の代わりに 100% や max-width を使えば、親要素に合わせて伸縮する可変の区切り線にもできます。