こんなことができるんだ！CSSのボーダーを破線や点線にするスタイルシートのテクニック

サイト構築 -CSS

Post on:2020年8月25日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

CSSのボーダーを破線や点線にするスタイルシートのテクニック・オンラインツールを紹介します。

ボーダーにborderを使用するのではなく、backgroundを細くして四辺に使用します。破線や点線の大きさや長さもカスタマイズでき、ボーダーを傾斜にしたり、フェードやアニメーションを与えることもできます。

More Control Over CSS Borders With background-image

CSSのボーダーを破線や点線にすることができます。
borderプロパティの値に、dashedやdottedがあることを知っている人もいるでしょう。例えば、下記のように記述します。

.box {
   border: 1px dashed black;
   border: 3px dotted red;
}

.box {

border: 1px dashed black;

border: 3px dotted red;

}

ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。

しかし、いくつかのテクニックを使用することで、それが実現できます！
Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。

See the Pen
Dashed Border Generator by Amit Sheen (@amitsheen)
on CodePen.

このテクニックのポイントは4つの背景（background）を使用することです。backgroundプロパティはカンマ区切りの値を取るため、4つの背景（上下左右に沿って1つずつ）を設定し、それらをボーダーのようにサイズ変更することで、borderプロパティの制約を解除することができます。

ジェネーターで自分好みのボーダーを簡単に作成できます。

.box {
    background-image: repeating-linear-gradient(-50deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px), repeating-linear-gradient(40deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px), repeating-linear-gradient(130deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px), repeating-linear-gradient(220deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px);
    background-size: 5px 100%, 100% 5px, 5px 100% , 100% 5px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
}

.box {

background-image: repeating-linear-gradient(-50deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px), repeating-linear-gradient(40deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px), repeating-linear-gradient(130deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px), repeating-linear-gradient(220deg, #f21c1c, #f21c1c 30px, transparent 30px, transparent 32px, #f21c1c 32px);