CSSで点線・破線の間隔を調整する方法

MARKLEAPS

2022.07.06

cssで間隔を調整出来る点線や破線の再現方法をご紹介します。

cssのborderでは点線や破線の間隔を調整出来ない

cssのborderを使用して、点線や破線を引くことが出来ますが、
この方法では点線、破線の間隔を調整することができません。

/* 点線 */
.dotted {
	border-bottom: 2px dotted #000000;
}

/* 破線 */
.dashed {
	border-bottom: 2px dashed #000000;
}

/* 点線 */

.dotted {

border-bottom: 2px dotted #000000;

}

/* 破線 */

.dashed {

border-bottom: 2px dashed #000000;

}

cssのbackgroundを使用して点線、波線を再現

点線や破線の間隔を調整するには、borderではなくbackgroundを使用します。

/* 点線 */
.dotted {
	background-image: linear-gradient(to right, #000, #000 2px, transparent 2px);
	background-size: 10px 2px /* 幅・高さを指定 */;
	background-position: left bottom /* 背景の開始位置を指定 */;
	background-repeat: repeat-x /* 横方向にのみリピート */;
}

/* 破線 */
.dashed {
	background-image: linear-gradient(to right, #000, #000 5px, transparent 5px);
	background-size: 15px 2px /* 幅・高さを指定 */;
	background-position: left bottom /* 背景の開始位置を指定 */;
	background-repeat: repeat-x /* 横方向にのみリピート */;
}