Speaking Design

Blogブログ

【コピペでカンタン】CSSだけで作れるボーダー&ストライプ柄

【コピペでカンタン】CSSだけで作れるボーダー&ストライプ柄

苦労してシームレスな画像を用意してなくても、スタイルシートだけでボーダー&ストライプが作れます!
サンプルもいくつか用意していますので、コピペでどうぞ。
CSSだけで作れるドット(水玉)柄編もありますので、よろしければ。

目次

ボーダー柄の作り方

コピペでサクッと済ませたい方はこちらのCSSをどうぞ

各パラメータをいじると、色やボーダー幅がカスタマイズできます。

div{
  background-image:repeating-linear-gradient(#DDD, #DDD 10px, #FFF 10px, #FFF 20px);
}
CSSだけで作ったボーダーです

以下、ロジックを説明します。

ボーダーのしくみをじっくり解説

現状、ボーダーを実装するスタイルシートは存在しないので、繰り返しの線形グラデーション(repeating-linear-gradient)を工夫してボーダーに見せています。
ということでここからは、まず基本のグラデーションから始めて、少しずつボーダーに整えていきながら内容を確認していきます。

基本のグラデーション

グラデーションの実装には『background-image』を使います。『background-color』じゃないんですね。
例えばグレー(#DDD)から白(#FFF)へ変わるグラデーションは、以下のような表記で実装することができます。

div{
  background-image:repeating-linear-gradient(#DDD, #FFF);
}
要素の上から下へ、緩やかに切り替わる基本のグラデーション

repeating-linear-gradient(色1, 色2)のように、半角カンマ区切りで色を繋げていきます。3色以上のグラデーションも可能です。

グラデーション位置の変更

色指定の後にサイズに関する数値を追加することによって、グラデーションの切り替わり位置を指定することができます。
例えば50%(グラデーションにする要素の縦中央)に指定すると、要素の真ん中で色1から色2に突然切り替わるので、ボーダーのように見えます。

div{
  background-image:repeating-linear-gradient(#DDD, #DDD 50%, #FFF 50%, #FFF);
}
要素の50%位置(縦中央)で急に色が変わることによって、ボーダーに見えるグラデーション

グラデーションサイズの変更

切り替わり位置をpx等で指定することによって、厳密なボーダーサイズを決めることができます。
ここでは以下のようなボーダーを設定しています。

・0〜10px:グレー(#DDD)
・10〜20px:白(#FFF)

21px以降は、0〜20pxのグラデーションが繰り返されます。

div{
  background-image:repeating-linear-gradient(#DDD, #DDD 10px, #FFF 10px, #FFF 20px);
}
10pxごとにグレーと白をリピートするボーダー(厳密にはグラデーション)

これでボーダー柄の完成です。

応用編:不規則ボーダー

切り替え位置を調整すれば、太さの異なるボーダーも作れます。

div{
  background-image:repeating-linear-gradient(#DDD, #DDD 5px, #FFF 5px, #FFF 15px);
}
太さ1:2のボーダーです

応用編:多色ボーダー

色数を増やして切り替え位置を調整すれば、2色以上のボーダーも作れます。
以下は3色の例です。

div{
  background-image:repeating-linear-gradient(#DDD, #DDD 5px, #FFF 5px, #FFF 10px, #999 10px, #999 15px);
}
5pxずつの3色ボーダーです

ストライプ柄の作り方

グラデーションの色指定(repeating-linear-gradientの丸括弧の中身)の頭に角度を挿入すると、グラデーションを回転させることができます。
回転角度の単位はdeg(degree:度)です。
90度回転させれば、ストライプ柄になります。

div{
  background-image:repeating-linear-gradient(90deg, #DDD, #DDD 10px, #FFF 10px, #FFF 20px);
}
ストライプ柄

斜めボーダー・ストライプ柄の作り方

角度を変えれば、斜めの縞模様も作れます。

div{
  background-image:repeating-linear-gradient(45deg, #DDD, #DDD 10px, #FFF 10px, #FFF 20px);
}
45度の斜めボーダー・ストライプ柄

まとめ

これで、パターン柄用にシームレスな背景用画像を用意する手間から解放されますね。
CSSだけで作れるドット(水玉)柄編と合わせて、是非ご活用ください。