Webサイトを作成していて点線をCSSで再現する場面は多く、デザインの中でも点線は頻繁に使われています。

点線の種類はたくさんあり、CSSで点線を再現するためのborderプロパティを使った方法だけでは対処できない可能性があります。

そこで、本記事ではCSSで点線を描く方法を3つ紹介します。

紹介する3つの方法さえ知っておけばどんな点線も再現できる可能性が高くなります。

記事の後半では、点線を使ったデザイン例も紹介するので、最後までご覧ください。

CSSで点線を描く3つの方法

CSSで点線を引く方法は主に以下の3つがあります。

それぞれのプロパティで表現できる点線には違いがあります。

ここからは、プロパティ別に記述方法やメリットを交えて紹介します。

点線を描く場面に合わせてプロパティを使い分ける必要があるため、それぞれのプロパティで点線を引く方法は理解しておかなければなりません。

まずはコピペして、どのような点線が再現できるかを確認しましょう。

実際に記事を読みながらコーディングすることで、理解が早くなるのでおすすめです。

それでは、それぞれのCSSプロパティで点線を引く方法とメリットを紹介します。

borderプロパティで点線を描く

CSSで一番使われる線を引く方法は、borderプロパティです。

borderプロパティは、ブロック要素の四方に境界線を引くためのプロパティです。

borderプロパティは、通常であれば一本線を引きますが、点線などに変更することもできます。

まずは、borderプロパティで点線を引く方法をコード例を用いて解説します。

HTML
<div class="container">
<p class="tensen">文字の下に点線を引きます</p>
</div>

CSS
.container{
  width: 200px;
}
.tensen{
  border-bottom: 2px dotted black;
}

上記のコードでは、border-bottomプロパティで境界線の下を指定し、太さ2pxの黒い線を指定しました。

通常であればsolidで一本を引きますが、dottedを書き、点線に変更しました。

borderプロパティで点線を再現する際には、値にdottedを記入するだけです。

borderプロパティには下の表のように、さまざまな線を引くための値が存在します。

none	境界線無し　初期値
solid	一本線を引きます
dashed	破線を引きます
dotted	点線を引きます
double	二重線を引きます

さらに、borderプロパティにtop、bottom、left、rightを組み合わせるだけで、上下左右の一方向のみを指定して線を引くことができます。

上下のみにborderプロパティを指定して、点線を引いてみます。

HTML
<div class="container">
<p class="tensen">文字の上下に点線を引きます</p>
</div>

CSS
.container{
  width: 200px;
}
.tensen{
  border-bottom: 2px dotted black;
  border-top: 2px dotted black;
}

文章の一部分に点線を引く際にもborderプロパティは有効です。

文章の一部分に点線を引く

spanタグを使用して、文章の一部分に下線を引くことができます。

下線も点線に変更できるため、簡単なコード例を紹介します。

HTML
<div class="container">
<p class="tensen">文字の<span class="ichibu">一部分</span>に点線を引きます</p>
</div>

CSS
.container{
  width: 250px;
}
.ichibu{
  border-bottom: 3px dotted red;
}

bottomを指定せず、borderプロパティで上下左右を指定することで文章の一部分を点線で囲むこともできます。

HTML
<div class="container">
<p class="tensen">文字の<span class="ichibu">一部分</span>を点線で囲みます。</p>
</div>

CSS
.container{
  width: 250px;
}
.ichibu{
  border: 3px dotted red;
}

一部分を目立たせるためにspanタグを使用し、borderプロパティで線を引く方法は頻繁に使われるため、必ず覚えておきましょう。

backgroundプロパティで点線を描く

background系のプロパティを駆使して、点線を引くことができます。

まずは、background系のプロパティを使用したコード例を紹介します。

HTML
    <div class="container">
        <p class="tensen">背景に点線を引く方法です。</p>
    </div>

CSS
.container{
  width: 200px;
}
.tensen{
  background-image : linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 3px, transparent 3px, transparent 5px); 
  background-size: 5px 3px;  
  background-position: left bottom;  
  background-repeat: repeat-x; 
}

backgroundプロパティの中のimageとsize、positionとrepeatを組み合わせることで点線を描くことができます。

backgroundプロパティを使用して、点線を引く詳しい記述方法については、記事の後半で紹介します。

上記のコードをコピペして、クラス名を合わせるだけで点線を引けるので、実際にコーディングしながら習得してください。

擬似要素とborderプロパティを活用して点線を描く

borderプロパティだけでなく、擬似要素を組み合わせることで、任意の場所に点線を引くことができます。

まずは、簡単なコード例を紹介します。

HTML
    <div class="container">
        <p class="tensen">擬似要素で点線を引く方法です。</p>
    </div>

CSS
.container{
  width: 250px;
}
.tensen {
    position: relative;
    text-align: center;
}
.tensen::after {
    border-bottom: 3px dotted rgb(255, 0, 0);
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
}

擬似要素である::afterを使用して点線を引いています。

::afterは指定した要素の後に文字や装飾を付け加える際に使用します。

点線はborder-bottomで引いていますが、擬似要素の特徴としては点線を描く場所と長さを自由に決められることです。

上記のコードでも、widthプロパティで点線の長さを決めて、bottomやleft、transformプロパティで点線を描く場所を決めています。

擬似要素はデザインを忠実に再現する上で非常に重要な方法となるので、確実に習得しておきましょう。

単純にCSSで点線を再現したいのであればborder

点線を引く方法を3つ紹介しましたが、単に点線を描きたい場合はborderプロパティを使う方法が簡単でおすすめです。

Webサイトのデザインにもよりますが、borderプロパティを使う場面が多くなります。

線の太さを変えるだけでも点線のデザインが大きく変わります。

太さを変えて点線の見た目を変える

borderプロパティで点線を引く時には、太さを変えるだけでもデザインは大きく変わります。

下記のコードで、1pxの点線と10pxの点線を比較してみます。

HTML
    <div class="container">
        <p class="tensen">1pxの点線を引きます</p>
        <p class="tensen2">10pxの点線を引きます</p>
    </div>

CSS
.container{
  width: 250px;
}
.tensen {
  border-bottom: 1px red dotted;
}
.tensen2{
  border-bottom: 10px red dotted;
}

borderプロパティで線の太さが変わるだけで見た目は大きく変わります。

しかし、線の太さを変える場合には、ブロック要素の全体の幅が変わることを理解しておく必要があります。

例えば、横幅を200pxで指定したdiv要素があった場合、線の幅を5pxに指定したとき、全体の幅は205pxになってしまいます。

ブロック要素の幅が変わってしまうと余白の幅や隣り合うブロック要素の幅も変更しなければなりません。

線の幅を指定してもブロック要素の幅が変わらないように設定しておく必要があります。

その設定は、CSSの最初に以下のコードを記述しておく方法です。

CSS
*{
  box-sizing: border-box;
}

上記の記述をしておくと、線の幅を変えてもブロック要素の幅は変わりません。

リセットCSSなどを用いる際には、すでに設定されている場合があるので、確認しておきましょう。

CSSで点線の間隔を調整する方法を手順を追って解説

borderプロパティで点線を引いた場合には、太さは変えられますが、点と点の間隔の調整はできません。

しかし、デザインを忠実に再現しようと思うと、点と点の間隔を調整しなければならない場面が出てきます。

そんな時は、background-imageプロパティを使用した方法が有効です。

ここからは、点線の間隔をbackground-imageプロパティを使って調整する方法を詳しく解説します。

background-imageのlinear-gradientを使用する

点線を引く方法の2つ目で紹介したbackground-imageプロパティで、linear-gradientの値を調整すると点と点の間隔を変更できます。

まずは、background-imageプロパティで点線を引いたコードを見ていきます。

HTML
    <div class="container">
        <p class="tensen">点線の間隔を調整します</p>
    </div>
</body>

CSS
.container{
  width: 210px;
}
.tensen{
  background-image : linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 3px, transparent 3px, transparent 5px); 
  background-size: 5px 3px;  
  background-position: left bottom;  
  background-repeat: repeat-x; 
}

それぞれのプロパティや値の意味を分解して解説します。

linear-gradientはグラデーションを設定するための値

linear-gradientは本来はグラデーションを設置するための値です。

今回はその特性を利用して点線を引いています。

liear-gradientでグラデーションを設定する方法はさまざまですが、今回は点線の間隔を調整するための方法で紹介します。

上記の手順でlinear-gradientを用いて、一つの点を作成します。

background-sizeで横幅と縦幅を決める

linear-gradientで一つの点を再現できたら、background-sizeで点と間隔の横幅と縦幅を指定します。

CSS
セレクタ{
background-size: 5px 3px;
}

background-sizeの前の値は横幅となるため、linear-gradintで指定した最後の値と同じにしなければなりません。

今回使用したコードでは5pxとなります。

background-sizeの2つ目の値は縦幅を指定します。

点の縦幅を指定するため、正方形の点にしたければlinear-gradientで指定した最初のpxの値と同じにする必要があります。

最初の値よりも大きくすると縦長の点が出来上がります。

linear-gradientとbackground-sizeで間隔は調整できる

linaer-gradientで設定したtransparentで透明にする範囲とbackground-sizeの横幅のサイズを広く設定することで、間隔を広げることができます。

逆に、間隔を狭くしたい場合は、値を小さくする必要があります。

上記のコードで表現した点線を広げた場合のCSSを紹介します。

HTML
    <div class="container">
        <p class="tensen">点線の間隔を調整します</p>
    </div>

CSS
.container{
  width: 210px;
}
.tensen{
  background-image : linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 3px, transparent 3px, transparent 8px); 
  background-size: 8px 3px; 
  background-position: left bottom;  
  background-repeat: repeat-x; 
}

5pxのサイズを8pxに変更したことで、間隔が広がったことがわかります。

実際にコーディングしながら、点と点の間隔を調整して、デザインに合わせる練習をしてください。

background-positionで背景の位置を決定する

background-positionは、背景の位置を決めるプロパティです。

今回は、文章の左下から点線を引くため以下のように記述します。

CSS
セレクタ{
background-position: left bottom;
}

もし、左上から点線を横に引きたい時には、bottomをtopに変更します。

CSS
セレクタ{
background-position: left top;
}

leftのみを記述すると、要素の中心に線を引くことになります。

background-repeatで点を繰り返し表示させる

background-imageのlinear-gradientで表現した一つの点と間隔を繰り返し表示することで、点線になります。

今回は、横に点線を引きたいため、x軸を指定します。

CSS
セレクタ{
background-repeat: repeat-x; 
}

上記のコードで右横にbackground-imageを繰り返す設定ができます。

もし、縦に点線を引きたい場合はrepeat-yとなります。

backgroundを使って点線を引く方法は、難しく感じると思いますが、一つ一つのコードの意味を理解しておけば、自由自在に点線を表現できるようになります。

点線の画像を使うのも一つの方法

CSSで点線を引きたい場合、画像を使うのも一つの方法です。

background-imageに画像を指定して、点線を表現してみます。

HTML
    <div class="container">
        <p class="tensen">画像を使って点線を引く</p>
    </div>

CSS
.tensen{
  background-image: url(tensen.png);
  background-position: bottom;
  background-repeat: repeat-x;
  padding-bottom: 5px;
}

点線の画像のパスをbackgroud-imageで指定し、下線に繰り返し表示させました。

画像を使って点線を表現するメリットとしては、様々なデザインの点線を表現できることです。

画像さえ作ってしまえばどんな点線でも表現できます。

しかし、画像を使うことで読み込みに時間が掛かるなどのデメリットもあるので、デザインや指示に従いながら使い分けるように注意してください。

HTMLのhrをCSSで点線にする

ブロックとブロックの間や文章と文章の間にHTMLのhrタグを使って境界線を引くことがあります。

hrタグを使った境界線もCSSで点線に変更できます。

HTML
    <div class="container">
        <p>文章が入ります。</p>
        <hr>
        <p>文章が入ります。</p>
    </div>

CSS
hr{
  border-top: 5px dotted black;
  border-right: none;
  border-bottom: none;
  border-left: none;
}

border-topを使って上辺のみに点線を表現します。

leftやright、bottomのborderはnoneとしておかないと一本線が表示されてしまうため、topかbottomのみを指定しなければなりません。

ブロックや文章を区切るときにhrタグは使用するので、点線で柔らかく表現したい場合には上記の方法を使ってみてください。

CSSの点線を使ったデザイン例を紹介

最後に点線を使ったデザイン例を紹介します。

点線を使うとデザインが柔らかい印象やオシャレな表現ができるため、さまざまな表現方法を理解しておきましょう。

括弧を点線に変更する

見出しなどにカギ括弧を使う場合に、カギ括弧を点線に変更する方法です。

HTML
    <div class="container">
        <p class="tensen">カギ括弧を点線にしてみました</p>
    </div>

CSS
.container{
  width: 300px;
}
.tensen{
  position: relative;
	padding: 25px;
}
.tensen::before, .tensen::after {
	content: '';
  position: absolute;
	width: 25px;
	height: 25px;
}
.tensen::before {
	border-left: dotted 2px #ff0000;
	border-top: dotted 2px #ff0000;
	top: 0;
	left: 0;
}
.tensen::after {
	border-right: dotted 2px #ff0000;
	border-bottom: dotted 2px #ff0000;
	bottom: 0;
	right: 0;
}

擬似要素を使ってカギ括弧を作り、borderプロパティを点線に変更しました。

画像を点線で囲む

画像の縁を点線で囲むデザインを紹介します。

今回は、円形に切り取った画像の周りにCSSで点線を表現します。

HTML
    <div class="container">
        <img src="computer.jpg" alt="">
    </div>

CSS
.container{
  width: 200px;
  height: 200px;
  border: dotted 5px hotpink;
  border-radius: 50%;
  overflow: hidden;
}

ただ画像を表示するよりも点線で囲むだけで目立たせることもできます。

これらのように点線は、表現の幅を広げるために役立ちます。

まとめ

今回は、CSSで点線を引くためのプロパティと点線の間隔を調整する方法を中心に紹介しました。

境界線や下線を点線に変更するだけでも、少しオシャレな表現にもなります。

境界線や下線を点線に変更する方法は主に以下の3つでした。

それぞれの方法を理解しておくだけでも、点線を自由に引けるようになります。

デザインを忠実に再現するためにも、さまざまな方法があることは理解しておきましょう。

HTMLやCSSを独学で勉強しているけど、うまく学習が進まなかったり、これからのプログラミング学習の先が見えない場合には、DMMWEBCAMPの無料カウンセリングに申し込みください。

どんなことでも良いので、ご相談をお待ちしております。