画像不要！模様をリピートさせた背景画像をCSSだけで作る方法
ウェブページの表示速度を少しでも速くしたいと思っている方は多いと思います。その一つの施策として、画像ファイルなどの外部ファイルをなるべく使用しないという方法があります。
単純な模様であれば、画像ファイルを用意しなくても、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」による実際の表示
〆
ここで紹介した模様は全て、透明 (transparent) と文字色 (currentcolor) を組み合わせたシンプルなものだけです。
ここにある模様だけでも、サイズ・位置・角度・色を変えたり、複数の模様を組み合わせることで、膨大な数の背景画像が出来上がると思います。
手軽に背景画像を設定したい方は是非、ご活用ください。
関連記事
- background-attachment:fixedが効かないブラウザ用パララックス
CSSのみで実現できるパララックス (視差) を、iOSのbackground-attachment:fixedが効かない謎仕様 (バグ?) で諦めていませんか? この記事では、background-attachment:fixedを使わないパララックスの実装方法を紹介しています。HTMLコードとCSSコードもありますので、コピペして使ってみてください。 - WordPressの新旧エディタをeditor-style.cssでなんとかする方法
WordPressの新旧エディタ (ブロックエディタとクラシックエディタ) の両方に対応しなければならない、そんなケースに、editor-style.cssだけでなんとかする方法を紹介しています。 - CSSセレクタの優先順位を自由自在に上げる方法
CSSセレクタの優先順位 (詳細度) を IDレベル、クラスレベル、要素レベル の3つのレベルで微調整する方法を紹介します。 - コピペから始めるウェブページの見出しデザイン
h2、h3、h4といった見出し要素1つのみで、見出しをデザインするためのCSSコードを紹介しています。ものすごく基礎的な内容なので、CSSコードをコピペしたら、自由にカスタマイズしてご利用ください。