Written by Kasumi

【簡単】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で点線・破線の間隔を空ける方法について紹介しました。

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

目次

関連記事

HTMLCSS プログラミング

【簡単】iphone(ios)でinputタグをタップしたらズームされるのを回避する方法

2022.02.12
2319
HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
184
HTMLCSS

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
1320
HTMLCSS

【簡単】radioボタン(ラジオボタン)のデザインをカスタマイズする方法【CSS】

更新日:2022.11.24
1104