• HTMLCSS

【簡単】CSSで点線・破線の間隔を空ける方法

CSSで点線・破線の間隔を空けたいが、borderプロパティだと出来ない。

border以外で点線・破線を再現し且つ間隔を自由に調整したい。

本記事ではこの様な悩みを解決。

実装例を元に解説します。

実装サンプル

See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

borderプロパティを使わず、点線・破線を再現。

間隔も調整できてる事がわかります。

実装手順は以下の通りです。

間隔自由の点線・破線CSSコード

/*点線*/
.dotted{
 padding: 10px;
 background-image : linear-gradient(to right, #000 5px, transparent 5px);
 background-size: 20px 5px;/*間隔、高さ*/
 background-repeat: repeat-x; 
 background-position: left bottom;
}
/*破線*/
.dashed{
 padding: 10px;
 background-image : linear-gradient(to right, #000 8px, transparent 8px);
 background-size:  30px 1px;
 background-repeat: repeat-x; 
 background-position: left bottom;
}

間隔自由の点線・破線を実装するコード例です。

backgroundプロパティを使います。

background-imageでlinear-gradientを指定。

引数には以下の様に指定します。

linear-gradient(to 向き, 色 点線・破線の横幅, transparent 点線・破線の横幅);

background-sizeで点線・破線の間隔、高さを指定します。

background-repeatで点線・破線を向きに応じてリピートします。

background-positionで点線・破線の開始位置を指定します。

以上で実装完了です。

まとめ

CSSで点線・破線の間隔を空ける方法について紹介しました。

以上で解説を終わります。