CSS Section Separator Generator

手軽にHTMLとCSSからセパレーター(区切り線)を作成するツール「CSS Section Separator Generator」

「CSS Section Separator Generator」は、セクションなどの区切り部分に、斜め線やギザギザ、波々などをHTMLとCSSで生成してくれる、ジェネレーターです。通常は区切り部分は色を変えて直線で区切っていることも多いかと思いますが、このジェネレーターを使うとちょっと変わったセパレーター(区切り線)の演出ができるかもしれません。

CSS Section Separator Generator

CSS Section Separator Generator

CSS Section Separator Generator

現時点で斜め線、半円、波々、ギザギザ、三角、丸みといったセパレーターの作成が可能となっています。お好みのセパレータを選択すると、セパレーターアイコンの下にドロップシャドウの様なものが表示されます。上の図では、斜め線のセパレーターを選択している状態です。

セパレーターのオプション設定

オプションで、各パーツの位置や大きさ、斜め線の角度、波の大きさなどをカスタマイズできます。下図では例としてギザギザのオプションをカスタマイズしています。矢印部分のハンドルを動かしてサイズや位置をカスタマイズできます。

セパレーターのギザギザをカスタマイズ

HTMLとCSSの出力

カスタマイズが完了したら、HTMLをCSSタブを開いて、ソースコードを確認。自分のWebサイトの適応したい場所に貼り付けて実装します。無駄なソースも少ないように思えるので、実装しやすいと思います。

セパレーターのHTML出力
HTMLコードの出力
セパレーターのCSS出力
CSSコードの出力

CSS Section Separator Generatorまとめ

現在(2020年4月15日執筆時点)、セパレーターの種類は6種類ですが、今後さらに種類が増えたら表現の幅が広がりますね。今までセパレーターを直線以外で作成する時は、SVGなどで画像を作成し配置していたので、装飾部分をできるだけCSSのみで実装したいと勝手に考えている自分としてはうまく活用していきたいジェネレーターかと思います。