【CSS】点線の間隔を調整する方法を解説

シュウ

今回は【CSS】点線の間隔を調整するについての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
linear-gradientの使い方について学びたい方へ
今回は点線の間隔を調整についての記事になります

上の図のように、点線をCSSで指定する際には、border-bottom: 2px dashed #000を指定しますが、
点線の間隔を調整するのはできません。
その場合にどのようなコードを指定するか解説します。

[記事の内容]

linear-gradient(線形)のグラデーションについて

gradientとは、グラデーションを指定する際に使用します。
書き方は以下のようになります。

/*--linear(線形)--*/
background: linear-gradient(開始色,終了色);

/*--radial(円形) ※今回はこちらは使用しません--*/
background: radial-gradient(中央の色,外側の色);

点線の間隔を調整について

linear-gradient()は、グラデーションを指定する際によく指定されますが、色やサイズ、繰り返し方法、表示位置を調整することで、様々なバリエーションの背景装飾を作成できます。
書き方は以下のようになります。

点線の間隔を調整について

① border

② linear-gradient

<p class="border">① border</p>
<p class="linear-gradient">② linear-gradient</p>

①
.border {
	border-bottom: 2px dashed #fa6158;
}

②
.linear-gradient {
	background-image : linear-gradient(to right, #fa6158 4px, transparent 4px);
	background-size: 10px 2px;
	background-repeat: repeat-x; 
	background-position: left bottom;
}

●1：background-image: linear-gradient(省略);: 1.linear-gradient()は、線形グラデーションを作成する関数です。
2.to rightは、グラデーションの方向を右に指定します。
3.#fa6158 4pxは、グラデーションの開始色と位置を指定します。
#fa6158 は赤色、4px は開始位置を左から4pxの位置に指定しています。
4.transparent 4pxは、グラデーションの終了色と位置を指定します。transparent は透明、4pxは開始位置を左から4pxの位置に指定しています。
全体この部分で、左から4pxまでは赤色、そこから右は透明になるグラデーションを作成しています。

●2:background-size: ・背景画像のサイズを指定します。
・10px 2px:幅10px、高さ2pxのサイズに背景画像を調整します。
この指定により、点線状の線が表現されます。
・幅 (10px): 点線と間隔の合計幅を調整します。この値を大きくすると、点線の間隔が広がります。
・高さ (2px): 線の太さを調整します。この値を大きくすると、線が太くなります。

●3:background-repeat: ・背景画像の繰り返し方法を指定します。
・repeat-x横方向に画像を繰り返します。これにより、点線状の線が横方向に連続して表示されます。

●4:background-position: ・背景画像の表示位置を指定します。
・left bottom左下を基準に背景画像を表示します。これにより、線が要素の左下に配置されます。

上線の点線の間隔について

上線についてです。
コードが以下になります。

上線の点線の間隔について

TOP linear-gradient

<p class="linear-gradient">TOP linear-gradient</p>

.linear-gradient {
	background-image : linear-gradient(to right, #fa6158 4px, transparent 4px);
	background-size: 10px 2px;
	background-repeat: repeat-x; 
	background-position: left top;
}

●background-position: ・背景画像の表示位置を指定します。
・left top左上を基準に背景画像を表示します。これにより、線が要素の左上に配置されます。

右線の点線の間隔について

右線についてです。
コードが以下になります

右線の点線の間隔について

RIGHT linear-gradient

<p class="linear-gradient">RIGHT linear-gradient</p>

.linear-gradient {
	background-image: linear-gradient(to bottom, #fa6158 4px, transparent 4px);
    background-size: 2px 10px;
    background-repeat: repeat-y;
    background-position: right bottom;
}

●1：background-image: linear-gradient(省略);: 1.to bottomは、グラデーションの方向を上から下へに指定します。

●2:background-size: ・2px 10px:幅2px、高さ10pxのサイズに背景画像を調整します。

●3:background-repeat: ・repeat-y縦方向に画像を繰り返します。

●4:background-position: ・背景画像の表示位置を指定します。
・right bottom右下を基準に背景画像を表示します。これにより、線が要素の右下に配置されます。

左線の点線の間隔について

左線についてです。
コードが以下になります

左線の点線の間隔について

LEFT linear-gradient

<p class="linear-gradient">LEFT linear-gradient</p>

.linear-gradient {
	padding-left: 2rem;
	background-image: linear-gradient(to bottom, #fa6158 4px, transparent 4px);
    background-size: 2px 10px;
    background-repeat: repeat-y;
    background-position: left bottom;	
}

●background-position: ・背景画像の表示位置を指定します。
・left bottom左下を基準に背景画像を表示します。これにより、線が要素の左下に配置されます。
・paddingで、調整します。

全体の点線の間隔について

全体についてです。
コードが以下になります

全体の点線の間隔について

linear-gradient

<p class="linear-gradient">linear-gradient</p>

.linear-gradient {
	text-align: center;
	background-image : linear-gradient(to right, #fa6158 4px, transparent 4px),
	  linear-gradient(to bottom, #fa6158 4px, transparent 4px),
	  linear-gradient(to left, #fa6158 4px, transparent 4px),
	  linear-gradient(to top, #fa6158 4px, transparent 4px);
	 background-size: 10px 2px,2px 10px,10px 2px,2px 10px;
	 background-repeat: repeat-x,repeat-y,repeat-x,repeat-y;
	 background-position:left top,right bottom,right bottom,left top;	
}

上記のコードが、上線、右線、下線、左線のコードを追加していくだけです。