装飾的セクションディバイダー（菱形）
このディバイダーは、左右に伸びる細い横線の中央へ小さな菱形を置いた区切り装飾です。 flex:1 で左右の線をそれぞれ伸ばし、間の gap で菱形ぶんの余白を確保しています。線は ::before と ::after の擬似要素で描いているため、HTML 側は空の div ひとつだけで完結します。
解説
このディバイダーは、左右に伸びる細い横線の中央へ小さな菱形を置いた区切り装飾です。flex:1 で左右の線をそれぞれ伸ばし、間の gap で菱形ぶんの余白を確保しています。線は ::before と ::after の擬似要素で描いているため、HTML 側は空の div ひとつだけで完結します。画像を一切使わず純 CSS のみで成り立つので、表示が速く、色やサイズの変更も CSS だけで済みます。
使うと映える場面
- 長い記事の章と章のあいだに入れる「ひと息つく」区切り
- サービス紹介ページで、概要セクションと料金セクションの境目
- プロフィールや見出し下に置く、上品なアクセント
線の色は background の値を本文の文字色に近いグレーへ寄せると馴染みます。中央の菱形は transform:rotate(45deg) をかけた小さな正方形なので、width と height を揃えたまま数値を変えれば大きさを調整できます。動きを持たないので prefers-reduced-motion の心配は不要ですが、装飾線は読み上げ対象にしたくないため、意味を持たせず純粋な飾りに留めるのが安全です。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
中央の菱形の大きさや色は変えられますか。
変えられます。菱形は擬似要素に回転をかけた小さな四角なので、width と height を同じ値で増減すれば大きさが、background の色を差し替えれば色が変わります。左右の線の色も同じ background で調整します。
画像やフォントアイコンは必要ですか。
不要です。線も菱形もすべて CSS の擬似要素で描いており、外部画像やアイコンフォントに依存しません。コピーして貼るだけで動き、読み込みも軽量です。