つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録~破線ボーダー線のスタイル生成

今回は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のコードをクラス名だけ変えて張り付ければ、破線ボーダー線を生成できる。