【CSS】ドット（水玉模様）やストライプ（ボーダー）、チェックのパターンを作ってみよう

2024年7月4日 19:31

基本のスタイルを調整するだけで、複数のパターンを生成できます。CSSだけを使い、ドットやストライプの背景パターンを作ってみましょう。

今回はグラデーション（gradient）を活用してパターンを作成していきます。

Safariへの実装時の注意！

透過のCSSグラデーションで、Safari、iphoneだけ透明の箇所が黒くなる現象があります。この解決法としてはtransparentで指定している部分を、rgbaの記述に変更することで回避が可能です。
例) transparent → rgba（255,255,255,0）

ボーダーパターン

.bg_border { background-color: #8be4f0 ; background-image: linear-gradient(-90deg, #fff  50%, transparent 50%); background-size: 14px 14px; }

「background-color」で背景色を指定し、「background-image」で縞の色を指定。

「background-size」を変えると、幅の変更ができます。
「linear-gradientの」角度をなくすと横縞になります。
（linear-gradient...線形グラデーションを指定する関数）

斜めのボーダーパターン

.bg_skew_border{ background-color: #fc693b ; background-image: repeating-linear-gradient(-45deg,#fff, #fff  7px,transparent 0, transparent 14px);

「background-image」で縞の色と幅を指定。

角度を変えることでボーダーの角度も変えることができます。
（repeating-linear-gradient...繰り返しの線形グラデーションを指定する関数）

チェックパターン

ボーダーパターンを２つ重ねることでチェック模様も作成できます。
ラインを半透明にしたり、縞の色を変えるのも可愛いと思います。

ドットパターン

.bg_dot{
  background-color: #fff ;
  background-image:
    radial-gradient(#7bded9 30%, transparent 30%);
  background-size: 20px 20px;
}

「background-color」で背景色を指定し、「background-image」で水玉模様の色を指定。

 「background-size」は水玉の大きさで、 「background-position」は水玉の間隔になります。
（radial-gradient...円形グラデーションを指定する関数）

小さめのドットにすると印象が変わります。ドット方眼のような表現も可能です。逆に大きいドットを作ると、ダイヤのようなパターンも作れますね。

斜めのドットパターン

ドットパターンを２つ重ねることで斜めのドットも作成できます。

/* ドット斜め */ .bg_skew_dot{ background-color: #fff ; background-image: radial-gradient(#7bded9 20%, transparent 20%), radial-gradient(#7bded9 20%, transparent 20%); background-size: 40px 40px; background-position: 0 0, 20px 20px; }

「background-position」は、「background-size」の半分の値を指定。

今回は20pxなので「background-position」では10pxずらします。
色やサイズをを変えることで、違ったパターンが作成できます。

まとめ

工夫次第で画像を使わずCSSだけでも様々なパターンを作成可能です。
色を変えるだけでもかなり印象は変わりますので色々試して見てください。