[CSSメーカー] Dashed Line Maker

2024/06/04

CSS Javascript Tool

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

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 : 線の色

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ