• #HTML・CSS・JavaScript

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

ボーダーやストライプ柄をCSSだけで作る事ができます。
画像を使った実装に比べて、ボーダー幅や色調整がカンタンにできるメリットもあります。
サンプルもいくつか用意していますので、コピペでどうぞ。

豊かに引きこもる。

Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。

ボーダー柄の作り方

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

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

div{
  background-image:repeating-linear-gradient(#DDD, #DDD 10px, #FFF 10px, #FFF 20px);
}

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

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

現状、ボーダーを実装するスタイルシートは存在しないので、繰り返しの線形グラデーション（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);
}

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

・0〜10px：グレー（#DDD）
・10〜20px：白（#FFF）

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

div{
  background-image:repeating-linear-gradient(#DDD, #DDD 10px, #FFF 10px, #FFF 20px);
}

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

応用編：不規則ボーダー

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

div{
  background-image:repeating-linear-gradient(#DDD, #DDD 5px, #FFF 5px, #FFF 15px);
}

応用編：多色ボーダー

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

div{
  background-image:repeating-linear-gradient(#DDD, #DDD 5px, #FFF 5px, #FFF 10px, #999 10px, #999 15px);
}

ストライプ柄の作り方

グラデーションの色指定（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);
}

まとめ

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

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