画像不要！模様をリピートさせた背景画像をCSSだけで作る方法

公開日: 2019-08-21
更新日: 2019-08-26

ウェブページの表示速度を少しでも速くしたいと思っている方は多いと思います。その一つの施策として、画像ファイルなどの外部ファイルをなるべく使用しないという方法があります。

単純な模様であれば、画像ファイルを用意しなくても、CSSのbackgroundプロパティのグラデーション (gradient) だけで作ることができます。今回は、その一例をご紹介します。

シンプルな縞模様

シンプルな縞模様は、repeating-linear-gradient()や、repeating-radial-gradient()を使うと簡単に作り出せます。

repeating-linear-gradient() を使った縞模様

._bg_1-1-1 {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 20px,
    currentcolor 20px,
    currentcolor 40px
  );
}
._bg_1-1-2 {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 20px,
    currentcolor 20px,
    currentcolor 40px
  );
}
._bg_1-1-3 {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 20px,
      currentcolor 20px,
      currentcolor 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 20px,
      currentcolor 20px,
      currentcolor 40px
    );
}

「_bg_1-1-1」は、描画角度が0度 (0deg)、0pxから20pxが透明 (transparent)、20pxから40pxが文字色 (currentcolor) の縞模様を敷き詰めます。

「_bg_1-1-2」は「_bg_1-1-1」の描画角度を90度 (90deg) にしたものです。

「_bg_1-1-1」と「_bg_1-1-2」を組み合わせると「_bg_1-1-3」のように中抜きのドット柄になります。

repeating-radial-gradient() を使った縞模様

._bg_1-2-1 {
  background-image: repeating-radial-gradient(
    circle at 0 100%,
    transparent 0,
    transparent 20px,
    currentcolor 20px,
    currentcolor 40px
  );
}
._bg_1-2-2 {
  background-image: repeating-radial-gradient(
    circle at 100% 0,
    transparent 0,
    transparent 20px,
    currentcolor 20px,
    currentcolor 40px
  );
}
._bg_1-2-3 {
  background-image:
    repeating-radial-gradient(
      circle at 0 100%,
      transparent 0,
      transparent 20px,
      currentcolor 20px,
      currentcolor 40px
    ),
    repeating-radial-gradient(
      circle at 100% 0,
      transparent 0,
      transparent 20px,
      currentcolor 20px,
      currentcolor 40px
    );
}

「_bg_1-2-1」は、左下を中心とする円 (circle at 0 100%) で、0pxから20pxが透明 (transparent)、20pxから40pxが文字色 (currentcolor) の波紋のような縞模様を敷き詰めます。

「_bg_1-2-2」は「_bg_1-2-1」を右上を中心とする円 (circle at 100% 0) にしたものです。

「_bg_1-2-1」と「_bg_1-2-2」を組み合わせると「_bg_1-2-3」のような重なった波紋になります。

円形の模様

円形の模様は、radial-gradient()を使います。repeating-radial-gradient()と異なり、background-repeatプロパティで模様を敷き詰めるため、background-sizeプロパティで描画領域の設定、background-positionプロパティで描画位置の設定が必要になる場合があります。

黒丸

._bg_2-1-1 {
  background-image: radial-gradient(
    currentcolor 70.71%,
    transparent 70.71%
  );
  background-size: 80px 80px;
}

「_bg_2-1-1」は正方形 (80px四方) の描画領域に、0%から70.71%が文字色 (currentcolor)、70.71%から100%が透明 (transparent) の円を描画します。

70.71%という数値は、100% ÷ √2 (100 ÷ 1.41421356237) で、直径100% (直径80px) の円を描くための数値になります。

白丸 (丸印)

._bg_2-1-2 {
  background-image: radial-gradient(
    transparent 35.355%,
    currentcolor 35.355%,
    currentcolor 70.71%,
    transparent 70.71%
  );
  background-size: 80px 80px;
}

「_bg_2-1-2」は正方形 (80px四方) の描画領域に、0%から35.355%が透明 (transparent)、35.355%から70.71%が文字色 (currentcolor)、70.71%から100%が透明 (transparent) の円を描画します。

35.355%という数値は、100% ÷ √2 ÷ 2 (100 ÷ 1.41421356237 ÷ 2) で、直径50% (直径40px) の円を描くための数値になります。

丸のドット柄

._bg_2-1-3-1 {
  background-image: radial-gradient(
    currentcolor 35.355%,
    transparent 35.355%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-1-3-2 {
  background-image:
    radial-gradient(
      currentcolor 35.355%,
      transparent 35.355%
    ),
    radial-gradient(
      currentcolor 35.355%,
      transparent 35.355%
    );
  background-position:
    0 0,
    40px 40px;
  background-size: 80px 80px;
}

「_bg_2-1-3-1」は正方形 (80px四方) の描画領域に、0%から35.355%が文字色 (currentcolor)、35.355%から100%が透明 (transparent) の円を描画します。

「_bg_2-1-3-2」は「_bg_2-1-3-1」の模様を1つ追加し、追加した模様の描画位置を描画領域の半分 (X軸方向とY軸方向にそれぞれ40px) ずらすことで、円が交互に並ぶ水玉模様になります。

線形の模様

線形の模様はrepeating-linear-gradient()だけでなくlinear-gradient()でも作れます。この場合はradial-gradient()と同様に、background-repeatプロパティで模様を敷き詰めるため、background-sizeプロパティで描画領域の設定、background-positionプロパティで描画位置の設定が必要になる場合があります。

repeating-linear-gradient()は、線の太さや間隔を決めた数値で厳密に設定したい場合に最適です。

対して、linear-gradient()は、敷き詰める線形の模様が意図したとおり並ぶよう、計算する必要はありますが、repeating-linear-gradient()では実現できない模様を作り出すことができます。

水平と垂直の縞模様

._bg_2-2-1 {
  background-image: linear-gradient(
    0deg,
    transparent 50%,
    currentcolor 50%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-2-2 {
  background-image: linear-gradient(
    90deg,
    transparent 50%,
    currentcolor 50%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-2-3 {
  background-image:
    linear-gradient(
      0deg,
      transparent 50%,
      currentcolor 50%
    ),
    linear-gradient(
      90deg,
      transparent 50%,
      currentcolor 50%
    );
  background-position: 0 0;
  background-size: 80px 80px;
}

「_bg_2-2-1」は正方形 (80px四方) の描画領域に、描画角度が0度 (0deg) で、0%から50% (0/2から1/2) が透明 (transparent)、50%から100% (1/2から2/2) が文字色 (currentcolor) の線を描画します。

「_bg_2-2-2」は「_bg_2-2-1」の描画角度を90度 (90deg) にしたものです。

「_bg_2-2-1」と「_bg_2-2-2」を組み合わせると「_bg_2-2-3」のような中抜きのドット柄になります。

斜線の縞模様

._bg_2-3-1 {
  background-image: linear-gradient(
    45deg,
    transparent 25%,
    currentcolor 25%,
    currentcolor 50%,
    transparent 50%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-3-2 {
  background-image: linear-gradient(
    135deg,
    transparent 25%,
    currentcolor 25%,
    currentcolor 50%,
    transparent 50%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-3-3 {
  background-image:
    linear-gradient(
      45deg,
      transparent 25%,
      currentcolor 25%,
      currentcolor 50%,
      transparent 50%,
      transparent 75%,
      currentcolor 75%
    ),
    linear-gradient(
      135deg,
      transparent 25%,
      currentcolor 25%,
      currentcolor 50%,
      transparent 50%,
      transparent 75%,
      currentcolor 75%
    );
  background-position: 0 0;
  background-size: 80px 80px;
}

「_bg_2-3-1」は正方形 (80px四方) の描画領域に、描画角度が45度 (45deg) で、0%から25% (0/4から1/4) が透明 (transparent)、25%から50% (1/4から2/4) が文字色 (currentcolor)、50%から75% (2/4から3/4) が透明 (transparent)、75%から100% (3/4から4/4) が文字色 (currentcolor) の線を描画します。

「_bg_2-3-2」は「_bg_2-3-1」の描画角度を135度 (135deg) にしたものです。

「_bg_2-3-1」と「_bg_2-3-2」を組み合わせると「_bg_2-3-3」のような中抜きのドット柄 (斜め) になります。

正方形の模様

「斜線の縞模様」で、隅っこが直角二等辺三角形になるのを確認できると思います。この直角二等辺三角形を組み合わせて正方形の模様を作ります。

格子模様 (チェック模様・市松模様)

._bg_2-4-1 {
  background-image: linear-gradient(
    45deg,
    currentcolor 25%,
    transparent 25%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-4-2 {
  background-image: linear-gradient(
    45deg,
    currentcolor 25%,
    transparent 25%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 40px 40px;
  background-size: 80px 80px;
}
._bg_2-4-3 {
  background-image:
    linear-gradient(
      45deg,
      currentcolor 25%,
      transparent 25%,
      transparent 75%,
      currentcolor 75%
    ),
    linear-gradient(
      45deg,
      currentcolor 25%,
      transparent 25%,
      transparent 75%,
      currentcolor 75%
    );
  background-position:
    0 0,
    40px 40px;
  background-size: 80px 80px;
}

「_bg_2-4-1」は正方形 (80px四方) の描画領域に、描画角度が45度 (45deg) で、0%から25% (0/4から1/4) が文字色 (currentcolor)、25%から75% (1/4から3/4) が透明 (transparent)、75%から100% (3/4から4/4) が文字色 (currentcolor) の線を描画します。

「_bg_2-4-2」は「_bg_2-4-1」の描画位置を描画領域の半分 (X軸方向とY軸方向にそれぞれ40px) ずらしたのものです。

「_bg_2-4-1」と「_bg_2-4-2」を組み合わせると「_bg_2-4-3」のような格子模様ができあがります。

斜めの格子模様

._bg_2-5-1 {
  background-image: linear-gradient(
    45deg,
    currentcolor 25%,
    transparent 25%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-5-2 {
  background-image: linear-gradient(
    135deg,
    currentcolor 25%,
    transparent 25%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 80px 80px;
  background-size: 80px 80px;
}
._bg_2-5-3 {
  background-image:
    linear-gradient(
      45deg,
      currentcolor 25%,
      transparent 25%,
      transparent 75%,
      currentcolor 75%
    ),
    linear-gradient(
      135deg,
      currentcolor 25%,
      transparent 25%,
      transparent 75%,
      currentcolor 75%
    );
  background-position:
    0 0,
    80px 80px;
  background-size: 80px 80px;
}

「_bg_2-5-1」は正方形 (80px四方) の描画領域に、描画角度が45度 (45deg) で、0%から25% (0/4から1/4) が文字色 (currentcolor)、25%から75% (1/4から3/4) が透明 (transparent)、75%から100% (3/4から4/4) が文字色 (currentcolor) の線を描画します。

「_bg_2-5-2」は「_bg_2-5-1」の描画角度を135度 (135deg) にして、描画領域と同じ分 (X軸方向とY軸方向にそれぞれ80px) ずらしたものです。

「_bg_2-5-1」と「_bg_2-5-2」を組み合わせると「_bg_2-5-3」のような格子模様 (斜め) ができあがります。

四角のドット柄

._bg_2-6-1 {
  background-image: linear-gradient(
    45deg,
    currentcolor 12.5%,
    transparent 12.5%,
    transparent 87.5%,
    currentcolor 87.5%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-6-2 {
  background-image: linear-gradient(
    135deg,
    currentcolor 12.5%,
    transparent 12.5%,
    transparent 87.5%,
    currentcolor 87.5%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-6-3 {
  background-image:
    linear-gradient(
      45deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    ),
    linear-gradient(
      135deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-6-4 {
  background-image:
    linear-gradient(
      45deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    ),
    linear-gradient(
      135deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    ),
    linear-gradient(
      45deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    ),
    linear-gradient(
      135deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    );
  background-position:
    0 0,
    0 0,
    40px 40px,
    40px 40px;
  background-size: 80px 80px;
}

「_bg_2-6-1」は正方形 (80px四方) の描画領域に、描画角度が45度 (45deg) で、0%から12.5% (0/8から1/8) が文字色 (currentcolor)、12.5%から87.5% (1/8から7/8) が透明 (transparent)、87.5%から100% (7/8から8/8) が文字色 (currentcolor) の線を描画します。

「_bg_2-6-2」は「_bg_2-6-1」の描画角度を135度 (135deg) にしたものです。

「_bg_2-6-1」と「_bg_2-6-2」を組み合わせると「_bg_2-6-3」ができあがり、もう1つ「_bg_2-6-3」を描画領域の半分 (X軸方向とY軸方向にそれぞれ40px) ずらして組み合わせることで四角のドット柄ができあがります。

「CodePen」による実際の表示

See the Pen Tiled background gradient by nov (@numerofive) on CodePen.

〆

ここで紹介した模様は全て、透明 (transparent) と文字色 (currentcolor) を組み合わせたシンプルなものだけです。

ここにある模様だけでも、サイズ・位置・角度・色を変えたり、複数の模様を組み合わせることで、膨大な数の背景画像が出来上がると思います。

手軽に背景画像を設定したい方は是非、ご活用ください。

CSSで段組みと内容の流し込みをするcolumnsプロパティの使い方
レスポンシブデザインに最適な段組みを可能にするCSSのcolumnsプロパティを、Appleのサイトにあるフッターメニューを例に解説しています。
数列を使用して数学的に設定するCSSのfont-size
ウェブデザインにおいて欠かせない文字組 (タイポグラフィ) ですが、フォントサイズはどのように決めていますか？今回は、フィボナッチ数列、等比数列、等差数列、階差数列、調和数列を使用して、数学的に作られたフォントサイズ一覧を紹介しています。
WordPressでCSSファイルをインライン化する最良の方法
WordPressでCSSファイルの内容をstyle要素内に書き出してHTML内に埋め込む、CSSコードのインライン化について解説しています。ウェブサイトの表示速度を改善したい場合にお試しください。
background-attachment:fixedが効かない問題の最終解決策
CSSの background-attachment: fixed がApple製品で効いているかのように実装する方法を紹介しています。今まで、手軽に、思う存分できなかったパララックスも、簡単にできるようになる方法です。