【CSS】点線の引き方3選間隔や長さを調節する方法も紹介

はじめに
- この記事の概要
- 対象読者
点線を引く
さいごに

はじめに

この記事の概要

こんにちは、たくまです！
みなさんはテキストなどの下に点線を引く際、どのようなCSSをあてていますか？
最も簡単な方法として、border: dotted(dashed)が思い浮かぶかと思います。
こちらは1行の記載で点線を描画できるから便利ですよね！
ただ、点線を引くにあたって下記のような悩みに直面したことはありませんか？

点線の間隔を自由に決めたい
点線の長さを自由に決めたい
点線の引く場所を自由に決めたい

上記はborder: dotted(dashed) でもある程度は頑張れますが、柔軟性が乏しいため、今回は他の方法もご紹介したいと思います！

対象読者

HTMLやCSSを勉強中の方
CSSを用いて点線を引きたい方

点線を引く

border: dotted(dashed)の使用する

まずは冒頭でも記述したborderを使用した点線の引き方を紹介します！

HTMLは下記のものを使用します。

<div class="dotted-line">点線を引くよ</div>

CSSは下記のように記述します。

.dotted-line {
  border: 3px dotted black;
}

この記述で表示されるのがこちらです。

点線が横幅いっぱいまで伸びているので、CSSにwidth: fit-content;を追記しましょう。

.dotted-line {
  border: 3px dotted black;
  width: fit-content;
}

これが最もオーソドックスな点線の引き方です！
みなさんもこの方法で点線を引くことは多いかと思います。
ちなみに、dottedをdashedにすることで波線にすることも可能です。

この方法は手軽に点線を引けることが魅力ですが、点線の長さや間隔を変える際には不便です。
border: 3pxの部分の数字を大きくすることで長さを変更することもできますが、長さのみではなく高さも変わってしまうため、全体的に不恰好になります。
試しに3pxを10pxに変更してみましょう。

.dotted-line {
  border: 10px dashed black;
  width: fit-content;
}

このようになってしまいます。
長さや間隔のみを変更したい場合は、次から紹介する方法がおすすめです！

backgroundプロパティを使用する

backgroundプロパティを使用することで柔軟なカスタマイズが可能です。
CSSを以下のように記述します。

.dotted-line {
  width: fit-content;
  background-image : linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 2px, transparent 2px, transparent 5px); 
  background-size: 4px 2px;  
  background-position: bottom;  
  background-repeat: repeat-x;
}

上記の記述で以下のような点線が表示されます。

コードを解説します。
まず、2行目ですが

to rightでグラデーションの開始位置を指定する
rgb(0, 0, 0), rgb(0, 0, 0) ,2pxで最初の0pxから2pxの位置まで色を指定する(点線の長さを指定している)
transparent 2px, transparent 5pxは、2pxから5pxの位置はtransparentで透明にする

次に3行目のbackground-sizeで、点線の間隔と高さを指定しています。
そして4行目のbackground-positionで、点線の位置を決定しています。
最後に5行目のbackground-repeatで、点線を繰り返し表示させるように指定しています。こちらをrepeat-y にすることで、縦線にすることができます。

点線の長さを6px、間隔を10pxにしたコードが以下の通りです。

.dotted-line {
  width: fit-content;
  background-image : linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 6px, transparent 2px, transparent 5px); 
  background-size: 10px 2px;  
  background-position: bottom;  
  background-repeat: repeat-x;
}

記述することが多いので難しく感じるかもしれませんが、まずは上記のコードをコピペして検証ツールなどで数値などをいじってみると分かりやすいと思います！
個人的にはこの方法も慣れたら簡単なのでオススメです！

擬似要素を使用する

最後に擬似要素を使用して点線を引く方法をご紹介します！
こちらは引く位置も柔軟に指定できます。

CSSを下記のように記述します。

.dotted-line {
  position: relative;
}

.dotted-line::after {
  border-bottom: 3px dotted #000;
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  transform: translateX(-50%);
  width: 100px;
}