自由に間隔を調整できる点線・破線をつける

デザインの中で、ちょっとした区切りや飾りに使える点線・破線。
でも、border-style: dotted; や dashed; を使うだけだと、
「点の大きさや間隔を調整したい！」ってときに限界があるんですよね。

今回は、CSSの背景画像（background-image）を使って、自由自在に調整可能な点線・破線をつくる方法をご紹介します！

border-style ではできないこと

border: 2px dotted #000;

これだけだと、点のサイズや間隔を細かく調整できません。
ブラウザ依存もあって、キレイに表示されないことも…。

background-image で点線風の下線を作る！

点線や破線をもっと自由にコントロールしたいときは、border-style: dotted に頼らず、背景画像（background-image）を使って擬似的に下線を作るのがオススメです。

今回は linear-gradient を使って、横方向の小さな線と透明部分を交互に描画し、点線のような表現を実現します。

See the Pen
自由に間隔を調整できる点線・破線をつける by webmoyou (@yydliugt-the-animator)
on CodePen.

この方法なら、線の長さ・太さ・間隔を細かく調整できるので、デザインのトーンに合わせて微調整しやすいのが魅力です。

応用：縦方向の点線にしたいとき

横方向と同じく、背景画像を活用して縦方向の点線や破線風の装飾もつくれます。
その際は、グラデーションの方向を to top に、そして repeat-y に変更するのがポイントです。

See the Pen
自由に間隔を調整できる点線・破線を縦方向につける by webmoyou (@yydliugt-the-animator)
on CodePen.

縦方向の点線をつくるときは、以下の3つがポイントです。

• linear-gradient(to top, ...) を使って上方向の線を描く
• background-size で横幅を狭く・高さで間隔調整
• repeat-y で縦に繰り返す

これで、任意の長さ・太さ・間隔で縦線風装飾が自在に調整可能になります✨
レイアウトの仕切りや枠の飾りなど、使い方はアイディア次第！

要素を点線・破線で囲む

See the Pen
自由に間隔を調整できる点線・破線で要素を囲む by webmoyou (@yydliugt-the-animator)
on CodePen.

まとめ

CSSで点線・破線をもっと自由にデザインしたいなら、border じゃなくて background-image の出番！
radial-gradient や linear-gradient を使えば、サイズも間隔も思い通り。ちょっとした装飾に差がつきますよ✨

見出し下の点線、区切り線などに、ぜひ取り入れてみてください！