dottedでもdashedでもない！CSSで好きな間隔の点線（破線）を作る方法

CSSだけで、任意の間隔の点線（破線）を表現する方法をご紹介します。

borderプロパティには、「dotted」と「dashed」の2パターン存在しますが、そのどちらの間隔でもない点線を使いたい時どうしていますか？
gifなどの画像を使っている方もいるのではないでしょうか。

画像を使わずにCSSだけで再現することができれば、スマホやRetina環境でもきれいに見せることができるので、できればCSSで作りたいですよね。

「background」の「linear-gradient」を使うことで再現できるので、そのやり方をご紹介します。

点線の作り方

線の幅が「3px」、間隔が「5px」の点線を作ると想定してご説明します。

まずはHTMLを記述します。

<div class="example"></div>

次に、CSSで点線を作っていきます。
以下3つのプロパティを使います。

点線の1セットをつくる

「1セット」とは、赤枠で示した部分のことです。
この1セットを作って、あとは「background-repeat」で繰り返し表示するイメージです。

「background-size」で大きさを設定

background-size: 8px 1px;

まずは1セットの枠の大きさを設定します。

• 線の幅が「3px」で間隔が「5px」⇒「8px」と指定。
• 線の高さが「1px」⇒「1px」と指定。

「background-image」+「linear-gradient」で点線を描く

グラデーション（linear-gradient）を使って点線を作ります。

background-image: linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px);

完成形はこのように書きます。
細かく説明していきます。

to right

これは、「右方向にグラデーションします」という意味。

#000, #000 3px

この部分が、線部分の記述です。
カラーコードの後ろの数値は、「始点」と「終点」です。
「始点0px～終点3pxの間を#000に」という内容になっています。

transparent 3px, transparent 8px

この部分が、間隔部分の記述です。
「始点3px～終点8pxの間を透明に」という内容です。

これらをカンマで区切って書くことで、1セットが完成します。

「background-repeat」で繰り返す

background-repeat: repeat-x;

あとは作った1セットを横方向に繰り返すだけです。

完成形

色や幅を変えることで色んなデザインに合った点線（破線）が作れます。

枠線を作る【応用編】

疑似要素（before、after）で点線を作れば、枠線を作ることもできます。

HTML

<div class="example">サンプル</div>

CSS

.example {
	position: relative;
}
.example::before {
	content: "";
	background-image: linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px),
	linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px),
	linear-gradient(to bottom, #000, #000 3px, transparent 3px, transparent 8px),
	linear-gradient(to bottom, #000, #000 3px, transparent 3px, transparent 8px);
	background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
	background-position: left top, left bottom, left top, right top;
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}

こんな感じです。
「background-image」の値はカンマ区切りにすることで複数指定できるので、4方向分作っています。

「pointer-events: none;」をつけないと、内包する要素がクリックできなくなってしまいます。
内包する要素がある場合は、必ず指定してください。

まとめ

CSSだけで点線を作る方法をご紹介しました。
画像で作るには冒頭で書いたようなデメリットがあるので、「dotted」でも「dashed」でもない時は是非このやり方で作ってみてください。