CSSで描く破線と点線の間隔を自由に調整する方法

Web制作において、破線や点線を使用する場面というのはよくあります。通常使用されるborderでもほとんど問題ないということもありますが、今回はもう少し自由度が高い破線と点線の描写を紹介します。

この方法を知っているだけでCSSで表現できる幅が広がりますので覚えておくと便利です。

CSSの基本borderで描く方法

まずは、基本となるborderを使用した表現からご紹介します。
文章の中で部分的に破線や点線を使用したい場合は以下のようにします。

文章の中でここだけ破線にして、ここは点線にしたい。

HTMLCSS

<p>文章の中で<span class="dashed">ここだけ破線</span>にして、<span class="dotted">ここは点線</span>にしたい。</p>

.dashed {
  border-bottom: 2px dashed #000;
}
.dotted {
  border-bottom: 2px dotted #000;
}

今回は破線と点線のご紹介なのでdashedとdottedを使用していますが、borderプロパティには以下のようなスタイル値があります。

値	線のスタイル
none	線なし（初期値）
solid	実線
double	二重線
dashed	破線
dotted	点線
groove	谷型の線
ridge	山型の線
inset	凹型の線
outset	凸型の線

backgroundを使用した表現方法

CSSだけで任意の間隔の破線や点線を描くにはbackgroundのlinear-gradientを使用します。では、実際にどのように使用するのかご紹介します。

まず、線と間隔をいくつにするのかを決定します。
例えば、線幅を「4px」、間隔を「6px」とした破線を描くとします。その場合は、この「4px」と「6px」を1セットとして考え繰り返すというイメージです。

線幅「6px」、間隔「4px」の破線を描くサンプルです。

線幅「2px」、間隔「2px」の点線を描くサンプルです。

HTMLCSS

<p>線幅「6px」、間隔「4px」の<span class="sample01">破線を描く</span>サンプルです。</p>
<p>線幅「2px」、間隔「2px」の<span class="sample02">点線を描く</span>サンプルです。</p>

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

みこと

破線をこんな風に設定できるんですね。
線や間隔を自由に設定できるのであればデザインの幅も広がりそうです。

では、破線を参考にして詳しく見ていきたいと思います。

background-imageのlinear-gradientを使用して描く

linear-gradientはグラデーションを作るときに使用します。

linear-gradient: (角度または方向, 開始色, 途中色, 終了色 );

グラデーションの方向をto rightで右方向に、線幅を#000, #000 6pxで設定、間隔をtransparent 6px, transparent 4pxで設定しています。
間隔の始点は線幅の終点からなので今回は6pxとなっています。

background-sizeで大きさを指定

background-size: 10px 2px;としていますが、これは線幅「6px」、間隔「4px」を1セットにするということなので合計の「10px」を幅に指定し、線の高さを「2px」としています。

background-positionで位置を指定

background-positionで表示する位置を設定しています。今回は文字の下部に破線を描きたいのでleft bottomとしています。

background-repeatで繰り返しを指定

background-repeatで背景の繰り返しを指定しています。今回はx軸方向への繰り返しなのでrepeat-xとしています。

まとめて書いてみる

今回は説明しやすいようにそれぞれのプロパティを分けて説明しましたが、実際にはbackgroundで以下のようにまとめて書くことができるので参考にしてください。

background: linear-gradient(to right, #000, #000 6px, transparent 6px, transparent 4px) repeat-x left bottom / 10px 2px;

応用編：枠線を描く

backgroundで破線の間隔を自由に設定できるようになれば、枠線も同じようにして自由な間隔の破線を利用して描くことが可能です。

線幅「6px」、間隔「4px」の枠線を描くサンプルです。

HTMLCSS

<div class="sample03">
  <p>線幅「6px」、間隔「4px」の枠線を描くサンプルです。</p>
</div>

.sample03 {
  background:
    linear-gradient(to right, #000, #000 6px, transparent 6px, transparent 4px) repeat-x left top / 10px 2px,
    linear-gradient(to right, #000, #000 6px, transparent 6px, transparent 4px) repeat-x left bottom / 10px 2px,
    linear-gradient(to bottom, #000, #000 6px, transparent 6px, transparent 4px) repeat-y left top / 2px 10px,
    linear-gradient(to bottom, #000, #000 6px, transparent 6px, transparent 4px) repeat-y right top / 2px 10px;
  padding: 1em;
  margin: 2em 0;
}