[CSSメーカー] Dashed Line Maker

ホームページ制作をしていた時に、破線や点線の間隔が思ったとおりに設定できないことに気が付きました。 今後便利に使えるように、クリエイトメーカーを作っておきました。

Dashed Line Maker（破線メーカー）

【プレビュー】

• サイズ

• 間隔

• border

• 色

css

解説

cssの便利に使えるborderプロパティにも、dottedやdashedなどの点線、破線がありますが、これらは幅の指定以外は全く言うことを聞いてくれません。 また、使っているWebブラウザによっても見栄えに違いが出てしまうため、安定したデザインの為にこの Dash-Line-Makerを使ってみてはいかがでしょうか？

より効率的に使いたい人向けのCSS

.dash{ --size : 8px; --interval: 8px; --border:2px; --color:black; display:block; height: var(--border); margin: 50px auto; border: 0; background-image: linear-gradient(to right, var(--color) var(--size), transparent var(--size)); background-size: calc(var(--size) + var(--interval)) var(--border); background-repeat: repeat-x; } css変数を使った方式です。 以下、変数定義の説明です。

--size : 破線の実線部分のサイズ --interval : 破線の空白部分のサイズ --border : 破線の縦幅 --color : 線の色