通常、点線や破線といえばborderプロパティを使用しますが、点線や破線の長さ(太さ)を設定出来ても、間隔を設定する事はできません。
今回はそれらを自由に設定するためにborderプロパティではなく、backgroundプロパティを使用する方法を解説していきます。
borderプロパティで点線・破線を設定する場合
通常、点線や破線を表現する場合はborderプロパティを使用する事が多いと思います。
borderプロパティでは以下のように指定します。
<p class="border1">ボーダー1</p>
<p class="border2">ボーダー2</p>.border1 {
padding-bottom: 5px;
border-bottom: 4px dotted #333;
}
.border2 {
padding-bottom: 5px;
border-bottom: 3px dashed #333;
}ボーダー1
ボーダー2
上記のように、線の太さや色などは変更出来るのですが線と線の間隔は自由に設定が出来ません。
線との間隔を設定するには、borderプロパティではなくbackgroundプロパティを使用します。次項で詳しく解説していきます。
backgroundプロパティでの点線・破線作成例
まずは、backgroundプロパティを使用した点線・破線の作成例をご覧ください。
.border1 {
padding-bottom: 5px;
background-image: linear-gradient(to right, #333 4px, transparent 4px);
background-size: 12px 4px;
background-position: left bottom;
background-repeat: repeat-x;
}
.border2 {
background-image: linear-gradient(to right, #333 8px, transparent 8px);
background-size: 20px 4px;
background-position: left bottom;
background-repeat: repeat-x;
}ボーダー1
ボーダー2
このように線の幅や高さはもちろん、線と線の間隔も自由に設定が出来ます。
borderプロパティの点線とは違い、backgroundプロパティを使用した方法では点線は丸にはなりませんが、いろいろな線を表現できるようになります。
backgroundプロパティでの点線・破線の設定方法
次に、先ほど紹介した点線の作成例を元に各設定方法について解説していきます。
background-image
background-image: linear-gradient(to right, #333 4px, transparent 4px);background-imageプロパティで、背景にグラデーションで線を表現しています。
「to right」で左から右に向かってグラデーションを設定し、「#333 4px」で色の指定と4pxまで色を付けて、「transparent 4px」で4px以降は透明となります。
background-size
background-size: 12px 4px;background-sizeプロパティで、線の大きさを設定しています。
線は色の付いている部分と透明(間隔)の部分で1セットとなります。上記例では「12px」は線と透明部分を合わせた幅となり、「4px」は線の高さとなります。
ですので、上記例での線と線の間隔は「12px – 4px = 8px」となります。
※この「4px」はbackground-imageプロパティで指定した「transparent 4px」の4pxとなります。
background-position
background-position: left bottom;background-positionプロパティで、線の開始位置(配置)を設定しています。
今回の場合は左下が開始位置となります。
background-repeat
background-repeat: repeat-x;background-repeatプロパティで、線の繰り返しを設定しています。
今回の場合は左から右に繰り返しとなるので、「repeat-x」を設定しています。
このように各プロパティを組み合わせる事で、ある程度自由に設定した線を表現する事ができます。
上下左右に線を設定する方法
先ほど解説したbackgroundプロパティで、上下左右に線を設定する方法を紹介します。
まずは下記のコードと作成例をご覧ください。
<p class="border1">ボーダー1</p>.border1 {
padding: 10px;
background-image: linear-gradient(to right, #000 4px, transparent 4px),
linear-gradient(to bottom, #000 4px, transparent 4px),
linear-gradient(to left, #000 4px, transparent 4px),
linear-gradient(to top, #000 4px, transparent 4px);
background-size: 8px 3px, 3px 8px, 8px 3px, 3px 8px;
background-position: left top, right top, right bottom, left bottom;
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
}ボーダー1
上記のように各方向へのグラデーション等を設定する事で上下左右の線を表現する事ができます。
上下と左右で線の交差する部分が微妙にずれる場合は、始まり位置をずらすか間隔や長さを調整してください。
さいごに
いかがでしたでしょうか。
今回は、CSSで点線や破線の長さ・間隔を自由に設定する方法について解説しました。
今回のように設定する事で、いろいろなデザインの線を表現する事も可能です。これで画像で線を設定する事も減って楽になるかもしれませんのでお試しください。
