CSSの点線の書き方｜間隔調整まで解説
-
この記事でわかること
- 表示したい場所や用途に合わせて、点線を作り分けられる
- 点の長さや間隔を、デザインに合わせて自分で調整できる
- 点線を作る方法がいくつかある中から、場面に合ったものを選べる
CSSでborder-style: dottedを使ったのに、点の間隔が思い通りにならず困った経験はありませんか。実はborder-styleだけでは、間隔を細かく調整できません。この記事の方法を使えば、点の長さと間隔を自分で決めた点線を作れるようになります。
ネコ丸
細かい間隔調整って地味に難しいんだよね〜！でも仕組みさえ分かれば意外とシンプルだよ！
全体像
この記事は、点線の標準的な書き方を確認してから、その弱点である間隔の調整に進む流れです。先に基本を知っておくと、なぜ別の方法が必要なのかを理解しやすくなります。初めての人は目次の順に読み進めてください。
標準の書き方は手軽ですが、点の間隔や大きさはブラウザによって変わります。間隔を自分で決めたいときは、背景として線を描く方法と、枠線を画像に置き換える方法の2つから選びます。
やりたいことが決まっている場合は、次の表から使う方法を探してください。
| やりたいこと | 使う方法 | 解説 |
|---|---|---|
| 四辺を手軽に点線にする | border-style: dotted |
基本の書き方 |
| 特定の辺だけ点線にする | border-bottom-styleなど |
基本の書き方 |
| 間隔を決めて下線を引く | linear-gradient |
間隔の調整 |
| 間隔を決めて縦線を引く | linear-gradient |
間隔の調整 |
| 間隔を決めて四辺を囲む | linear-gradient（4つ重ねる） |
間隔の調整 |
| 枠線そのものを点線にする | border-image |
間隔の調整 |
ネコ丸
まずは基本、それから応用の順番で読むとスッと頭に入るよ！
点線(dotted)の基本の書き方
border-styleで四辺を点線にする
CSSで要素の枠線を点線にするには、border-styleプロパティにdottedを指定します。
border-style: dotted; /* 四辺すべてを点線にする */太さや色までまとめて指定したい場合は、shorthand※1を使うと1行で書けます。
border: 2px dotted #333; /* 太さ / スタイル / 色 */点の間隔や大きさはCSS仕様で決められておらず、ブラウザによって見た目が変わります。調整方法は後半の章で解説します。
※1: 複数のCSSプロパティ（太さ・スタイル・色など）を1行でまとめて指定できる書き方
方向ごとに点線を指定する
四辺すべてではなく特定の辺だけ点線にしたい場合は、方向ごとのプロパティを使います。
border-top-style: dotted; /* 上辺のみ点線 */
border-bottom-style: dotted; /* 下辺のみ点線 */left・rightも同様の書き方で指定できます。
ネコ丸
dottedの点の見え方はブラウザ任せなんだ。間隔まできっちり決めたいときは、次の章の方法を使ってね！
点線の間隔を自由に調整する方法
border-styleだけでは、点の間隔を変更できません。ここからは、background-imageやborder-imageを使って間隔を自由にコントロールする方法を紹介します。
linear-gradientで「下線」として点線を作る
background-imageにlinear-gradient※2を使うと、点の長さと間隔を自分で指定した点線を描画できます。border-bottomの代わりとして下側に配置する場合は、次のように書きます。
HTML
<div class="dotted-line"></div>CSS
.dotted-line {
background-image: linear-gradient(to right, #333 2px, transparent 2px); /* ① */
background-size: 8px 2px; /* ② */
background-position: left bottom; /* ③ */
background-repeat: repeat-x; /* ④ */
height: 2px; /* ⑤ */
}| コード解説 | |
|---|---|
| ① | 1マスの左から2pxだけを#333で塗り、残りを透明にする（点の長さ） |
| ② | 1マスの大きさ。幅8pxが「点＋間隔」、高さ2pxが線の太さになる |
| ③ | 確保した領域の下端に線を寄せて、border-bottomのような見た目にする |
| ④ | 横方向に繰り返し表示 |
| ⑤ | 線を表示するための高さを確保する |
ここでのポイントは「height」と「background-position」の2つです。background-imageは要素の背景として描かれるだけです。そのため、線を表示するための高さを自分で確保する必要があります。
要素に他のコンテンツがある場合は、heightの代わりにpadding-bottomで高さを確保することもできます。
確保した領域の中で、background-position: left bottomによって線を一番下に寄せます。これにより、見た目上はborder-bottomを指定したときと同じ位置に点線が表示されます。
※2: 色や透明度を段階的に変化させる背景画像の一種
linear-gradientで縦方向（左右の線）を作る
縦方向に点線を引きたい場合は、グラデーションの方向とbackground-sizeの縦横を入れ替えます。考え方は横方向のときと同じです。position指定で、左右どちら側に線を寄せるかを決めます。
HTML
<p class="dotted-line-vertical">縦方向の点線サンプル</p>CSS
.dotted-line-vertical {
background-image: linear-gradient(to bottom, #333 2px, transparent 2px); /* ① */
background-size: 2px 8px; /* ② */
background-position: left top; /* ③ */
background-repeat: repeat-y; /* ④ */
}| コード解説 | |
|---|---|
| ① | 縦方向にグラデーションを描画 |
| ② | 点の幅2px・間隔を含めた高さ8pxの周期 |
| ③ | 領域の左端に線を寄せて、border-leftのような見た目にする |
| ④ | 縦方向に繰り返し表示 |
文字と線が重なる場合は、padding-leftで線と文字の間に余白を取ってください。
四辺すべてに点線風の装飾をつける
四辺すべてに点線風の装飾を付けたい場合は、4方向分のlinear-gradientを重ねて指定します。
HTML
<div class="dotted-box">四辺点線のサンプル</div>CSS
.dotted-box {
background-image: /* ① */
linear-gradient(to right, #333 2px, transparent 2px),
linear-gradient(to bottom, #333 2px, transparent 2px),
linear-gradient(to left, #333 2px, transparent 2px),
linear-gradient(to top, #333 2px, transparent 2px);
background-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px; /* ② */
background-position: left top, right top, right bottom, left bottom; /* ③ */
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y; /* ④ */
}| コード解説 | |
|---|---|
| ① | 上下左右それぞれの辺用に4つのグラデーションを指定 |
| ② | 各辺の点の周期を辺ごとに指定 |
| ③ | 各グラデーションの描画開始位置を辺に合わせて指定 |
| ④ | 上下は横方向、左右は縦方向に繰り返し |
この方法で作る点は四角形になります。border-style: dottedのような丸い点は表現できない点に注意してください。
border-imageで枠線自体を点線化する
border-imageを使うと、border自体をグラデーション画像に置き換えて点線化できます。
HTML
<div>border-imageで作った点線枠のサンプル</div>CSS
div {
border: 5px solid transparent; /* ① */
border-image: repeating-linear-gradient( /* ② */
90deg,
#333 0,
#333 10px,
transparent 10px,
transparent 20px
);
border-image-slice: 1; /* ③ */
}| コード解説 | |
|---|---|
| ① | 枠線の太さを確保しつつ色は透明にする |
| ② | 点の長さ(10px)と間隔(10px)を繰り返すグラデーション画像 |
| ③ | グラデーション画像を枠線に割り当てるための指定 |
四隅の継ぎ目は、ブラウザによって見え方が異なる場合があります。そのため、装飾目的での利用がおすすめです。
linear-gradientとborder-imageの使い分け
どちらも点線の間隔を調整できます。ただし仕組みと得意な場面が異なるため、次の3つの観点で選び分けます。
| 観点 | linear-gradient | border-image |
|---|---|---|
| 適用先の違い | 背景として描くため、線のスペースを自分で確保する必要がある | borderそのものを置き換えるため、border-widthがそのまま線の太さになる |
| 四辺への対応方法 | 辺ごとに個別指定が必要で、記述が長くなる | 1つのグラデーションを四辺にまとめて割り当てられる |
| 向いている用途 | 下線や一辺だけの点線 | 四辺まとめた点線枠（角の見え方はブラウザ依存） |
ネコ丸
下線だけならlinear-gradient、枠線全体ならborder-imageって覚えておくといいよ！
さいごに
まとめ
CSSの点線は、目的に応じて次の3つを使い分けると実装しやすくなります。
- 手軽に点線にしたいなら
border-style: dotted（間隔は調整できない） - 下線など一部分の点線で間隔を調整したいならlinear-gradient
- 枠線全体を点線にして間隔を調整したいならborder-image
よくある質問
border-style: dottedとlinear-gradientで作った点線、何が違いますか？
border-style: dottedは丸い点になります。ただし、間隔は調整できません。linear-gradientで作る点線は、間隔を自由に調整できます。その代わり、点の形は四角形になります。
linear-gradientでborder-bottomのように下だけに線を出すにはどうすればいいですか？
まず、heightまたはpadding-bottomで線を表示する高さを確保します。そのうえでbackground-position: left bottomを指定し、線を下端に寄せます。
border-imageとbackground-image、どちらを使えばいいですか？
一辺だけ、または下線のように部分的に点線を引きたい場合はbackground-imageを使います。四辺まとめて枠線として点線化したい場合は、border-imageが向いています。
点線の間隔をピクセル単位で正確に指定できますか？
できます。linear-gradientのbackground-sizeや、border-image内のrepeating-linear-gradientの数値でピクセル単位の指定が可能です。
