基本的な破線／点線の書き方

cssで破線や点線を表現する時は下記のように書きます。

.bb-dashed {
    border-bottom: 1px dashed #cccccc;
}

.bb-dotted {
    border-bottom: 1px dotted #cccccc;
}

ただ、この破線や点線の間隔を調整したい時はどうすれば良いでしょうか。

間隔を調整する方法

破線や点線を画像として書き出して背景画像に設定する方法がありますが、書き出しの手間があるので、できれば画像を使わずにcssだけで表現できないものか。

そこで調べたところ、cssグラデーションlinear-gradient()を使って表現できるようです。

.bb-dashed2 {
    /* 線の長さ2pxの線を背景画像とする */
    background-image: linear-gradient(to right, #000 2px, transparent 2px);
    /* 背景画像の大きさを設定 */
    background-size: 10px 1px;
    /* 背景の開始位置を指定 */
    background-position: left bottom;
    /* 横方向に繰り返す */
    background-repeat: repeat-x;

}

linear-gradient()で上記のようなセットを背景画像に設定します。

それを繰り返すことで破線を表現できます。

点線の場合は下記のようにします。

.bb-dotted2 {
    /* ドットの大きさ2 × 2pxの点を背景画像とする */
    background-image: linear-gradient(to right, #000 2px, transparent 2px);
    /* 背景画像の大きさを設定 */
    background-size: 12px 2px;
    /* 背景の開始位置を指定 */
    background-position: left bottom;
    /* 横方向に繰り返す */
    background-repeat: repeat-x;
}

上記の例では 「2×2pxのドット ＋ スペース部分10px」のセットを繰り返しています。

ただ、border-style: dotted;と違い、ドットが丸型ではなく四角になってしまいます。これは仕方ないですね。

下線だけでなく上下左右のボーダーを表現する方法

linear-gradient()を4つ設定することで下線だけでなく、上下左右全ての線を表現することもできます。

.dashed2 {
    /* 線の長さ2pxの線を背景画像とする */
    background-image:
    linear-gradient(to right, #000 2px, transparent 2px),
    linear-gradient(to bottom, #000 2px, transparent 2px),
    linear-gradient(to left, #000 2px, transparent 2px),
    linear-gradient(to top, #000 2px, transparent 2px);

    /* 背景画像の大きさを設定 */
    background-size:
    10px 1px,
    1px 10px,
    10px 1px,
    1px 10px;

    /* 背景の開始位置を指定 */
    background-position:
    left top,
    right top,
    right bottom,
    left bottom;

    /* 横方向に繰り返す */
    background-repeat:
    repeat-x,
    repeat-y,
    repeat-x,
    repeat-y;
}

.dotted2 {
    /* ドットの大きさ2 × 2pxの点を背景画像とする */
    background-image:
    linear-gradient(to right, #000 2px, transparent 2px),
    linear-gradient(to bottom, #000 2px, transparent 2px),
    linear-gradient(to left, #000 2px, transparent 2px),
    linear-gradient(to top, #000 2px, transparent 2px);

    /* 背景画像の大きさを設定 */
    background-size:
    12px 2px,
    2px 10px,
    10px 2px,
    2px 10px;

    /* 背景の開始位置を指定 */
    background-position:
    left top,
    right top,
    right bottom,
    left bottom;
    
    /* 横方向に繰り返す */
    background-repeat:
    repeat-x,
    repeat-y,
    repeat-x,
    repeat-y;
}

まとめ

ボーダーをborderではなくlinear-gradient()で表現することで破線や点線のスペースを調整する方法をご紹介しました。

linear-gradient()の設定方法をきちんと理解していないと調整に手間取るかもしれませんが、理解してしまば結構応用が効いて便利だと思います。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。