cssで破線を引く方法

cssで破線を引く場合、デフォルトでない線を使いたくなる時があります。破線の間隔を自由に調整したいや、二色が交互の線にしたい！となった時には、デフォルトの機能だけでは再現することができません。

css3を使うことで、再現できるので、その実装方法について解説していきます！

cssを使って引ける破線

まずはcss3を使わずとも引ける線です。

デフォルトで引ける線だとこんな線になってしまいます。デザインをしていく中でこの線を使う場面というのはあまりないかなと思います。

css3を使って破線を引く

まずはソースコードになります。

<div class="border-bottom"></div>
<style>
.border-bottom {
  width: 100%;
  height: 100px;
  background-image: linear-gradient(to right, rgba(0, 0, 0,1), rgba(0, 0,0,1) 3px, transparent 3px, transparent 8px);
  background-repeat: repeat-x;
  background-size: 11px 2px;
  background-position: left bottom;
  padding-bottom: 2px;
}
</style>

破線を作るためにbackgroundにlinear-gradientを使って設定していきます。本来の使い方はグラデーションを作るためのものですが、グラデーションの境を0にすることで、黒が一定間隔で並ぶデザインを作ることができます。これを繰り返して表示することで、任意の幅の線を引くことができます。

linear-gradientの設定

linear-gradient(方向, 色, 色 位置[, 色 位置・・・])

今回は間隔が5pxの3pxの破線を引いていきたいと思います。

右に向かって線を引いていくので、to rightを設定します。

次に色と位置ですが、その位置時点の色を指定します。

まずは、破線の色を指定します。そして次の値の色の部分も同じ色を指定します。次に破線の間隔の部分を指定していきます。透明にしておけば良いので、transparentを使って透明にします。そして、位置を前の値と同じものを指定します。こうすることで、グラデーションの効果がつかずに色を変えることができます。最後に5px分の間隔を空けるので、transparent 8pxをつけて完了です。

これをrepeat-xで並べていけば破線を引くことができます。

破線で囲む方法

<div class="border-dashed"></div>
<style>
.border-dashed {
  width: 100%;
  height: 100px;
  background-image: linear-gradient(to right, rgba(0,0,0, 0.5), rgba(0,0,0, 0.5) 3px, transparent 3px, transparent 8px), linear-gradient(to bottom, rgba(0,0,0, 0.5), rgba(0,0,0, 0.5) 3px, transparent 3px, transparent 8px), linear-gradient(to right, rgba(0,0,0, 0.5), rgba(0,0,0, 0.5) 3px, transparent 3px, transparent 8px), linear-gradient(to bottom, rgba(0,0,0, 0.5), rgba(0,0,0, 0.5) 3px, transparent 3px, transparent 8px);
  background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
  background-size: 11px 2px, 2px 11px,11px 2px, 2px 11px;
  background-position: left bottom,left bottom,right top, right top;
  padding: 2px;
}
</style>