今回はCSSのデザインで破線のボーダー線のスタイルを自由に設定できる方法があるので、それを紹介したい。
以下のサイトのDashed Border Generatorを使って破線や点線の大きさや長さ、傾き角度をスライダで設定して、CSSのスタイルコードを生成する。
こんなことができるんだ!CSSのボーダーを破線や点線にするスタイルシートのテクニック | コリス
生成したスタイルコードをCSSや直接タグに記述することでWeb上に表示させることができる。
いくつかタグでstyle記述して生成した例を以下に掲載する。
間隔が広い破線ボーダー
<p style="background-image: repeating-linear-gradient(-53deg, #d31db5, #d31db5 10px, transparent 10px, transparent 29px, #d31db5 29px), repeating-linear-gradient(37deg, #d31db5, #d31db5 10px, transparent 10px, transparent 29px, #d31db5 29px), repeating-linear-gradient(127deg, #d31db5, #d31db5 10px, transparent 10px, transparent 29px, #d31db5 29px), repeating-linear-gradient(217deg, #d31db5, #d31db5 10px, transparent 10px, transparent 29px, #d31db5 29px);background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;background-position: 0 0, 0 0, 100% 0, 0 100%; background-repeat: no-repeat; text-align:center">間隔が広い破線ボーダーのスタイル生成 </p>
間隔が広い破線ボーダーのスタイル生成
縄目風破線ボーダー
<p style="background-image: repeating-linear-gradient(-60deg, #000000, #000000 30px, transparent 30px, transparent 31px, #000000 31px), repeating-linear-gradient(30deg, #000000, #000000 30px, transparent 30px, transparent 31px, #000000 31px), repeating-linear-gradient(120deg, #000000, #000000 30px, transparent 30px, transparent 31px, #000000 31px), repeating-linear-gradient(210deg, #000000, #000000 30px, transparent 30px, transparent 31px, #000000 31px);background-size: 5px 100%, 100% 5px, 5px 100% , 100% 5px;background-position: 0 0, 0 0, 100% 0, 0 100%;background-repeat: no-repeat;text-align:center"> 縄目風破線ボーダーのスタイル生成 </p>
縄目風破線ボーダーのスタイル生成
細かい破線ボーダー
<p style="background-image: repeating-linear-gradient(-4deg, #8f1eeb, #8f1eeb 3px, transparent 3px, transparent 4px, #8f1eeb 4px), repeating-linear-gradient(86deg, #8f1eeb, #8f1eeb 3px, transparent 3px, transparent 4px, #8f1eeb 4px), repeating-linear-gradient(176deg, #8f1eeb, #8f1eeb 3px, transparent 3px, transparent 4px, #8f1eeb 4px), repeating-linear-gradient(266deg, #8f1eeb, #8f1eeb 3px, transparent 3px, transparent 4px, #8f1eeb 4px);background-size: 5px 100%, 100% 5px, 5px 100% , 100% 5px;background-position: 0 0, 0 0, 100% 0, 0 100%;background-repeat: no-repeat;text-align:center"> 細かい破線ボーダーのスタイル生成 </p>
細かい破線ボーダーのスタイル生成
ハッチング風破線ボーダー
<p style="background-image: repeating-linear-gradient(-60deg, #0a0a0b, #0a0a0b 1px, transparent 1px, transparent 2px, #0a0a0b 2px), repeating-linear-gradient(30deg, #0a0a0b, #0a0a0b 1px, transparent 1px, transparent 2px, #0a0a0b 2px), repeating-linear-gradient(120deg, #0a0a0b, #0a0a0b 1px, transparent 1px, transparent 2px, #0a0a0b 2px), repeating-linear-gradient(210deg, #0a0a0b, #0a0a0b 1px, transparent 1px, transparent 2px, #0a0a0b 2px); background-size: 5px 100%, 100% 5px, 5px 100% , 100% 5px;background-position: 0 0, 0 0, 100% 0, 0 100%;background-repeat: no-repeat;text-align:center"> ハッチング風破線ボーダーのスタイル生成 </p>
ハッチング風破線ボーダーのスタイル生成
グラデーション装飾破線ボーダー
<p style="background-image: repeating-linear-gradient(-44deg, #112be8, #112be8 7.2px, transparent 18px, transparent 19.2px, #112be8 21px), repeating-linear-gradient(46deg, #112be8, #112be8 7.2px, transparent 18px, transparent 19.2px, #112be8 21px), repeating-linear-gradient(136deg, #112be8, #112be8 7.2px, transparent 18px, transparent 19.2px, #112be8 21px), repeating-linear-gradient(226deg, #112be8, #112be8 7.2px, transparent 18px, transparent 19.2px, #112be8 21px);background-size: 7px 100%, 100% 7px, 7px 100% , 100% 7px;background-position: 0 0, 0 0, 100% 0, 0 100%;background-repeat: no-repeat; text-align:center">グラデーション装飾破線ボーダーのスタイル生成 </p>
グラデーション装飾破線ボーダーのスタイル生成
CSSを使用する場合はDashed Border Generatorのコードをクラス名だけ変えて張り付ければ、破線ボーダー線を生成できる。