CSS | ストライプ柄の作り方

2021-11-24CSS グラデーション,CSS デザイン,CSS

CSSのグラデーション機能、repeating-linear-gradient()プロパティを使って簡単なストライプ柄の作り方を紹介しています。

ストライプ柄やグラデーション、水玉くらいですとCSSで簡単に作成・編集できますので、背景画像を用意するより便利な部分もあります。

ストライプ柄の作り方

要素にrepeating-linear-gradient()プロパティを指定してストライプ柄を作成する実装サンプルとサンプルコードです。

See the Pen CSS | Gradation Text by yochans (@yochans) on CodePen.

<div class="gradation"></div>

repeating-linear-gradient()は名前の通り、要素の背景に対して指定した色から色へのグラデーションを繰り返す処理を実行します。

各色には2つの位置がオプション指定可能で、ストライプ柄にしたい場合は開始位置・終了位置と考えて問題ありません。
終了位置と次の色の開始位置を同じ値で指定する事で、グラデーションではなくはっきりとした境界になりストライプ柄が作成可能になります。

位置の指定はpxのかわりに%やrem、em、vw、vhなどCSSで利用可能なサイズの各単位も使用可能です。

0px、０％などは０として単位を省略しての基準が可能です。

.gradation {
	width: 100%;
	height: 200px;
	background: repeating-linear-gradient(90deg, #4169e1 0 15px, #87ceeb 15px 30px);
}

各色の幅を可変にする

各色の幅を要素の幅、画面の幅に合わせてレスポンジフな可変にしたい場合は、pxではなく%で指定することで実装できます。

.gradation {
	width: 100%;
	height: 200px;
	background: repeating-linear-gradient(90deg, #4169e1 0 2%, #87ceeb 2% 4%);
}

また、vh（画面横サイズの比率）での指定もレスポンジフな可変に対応可能です。
※画面サイズより小さい要素内では注意。

.gradation {
	width: 100%;
	height: 200px;
	background: repeating-linear-gradient(90deg, #4169e1 0 1vw, #87ceeb 1vw 2vw);
}

ストライプの角度を変更する

ストライプの向き・角度を変更する場合は、degで指定している角度を調節します。

.gradation {
	width: 100%;
	height: 200px;
	background: repeating-linear-gradient(90deg, #4169e1 0 2%, #87ceeb 2% 4%);
}

向きは角度（deg）、オプション文字列にて設定可能です。
例えば45degにすれば右上がりの斜めストライプになります。

ストライプの色を増やす

ストライプの色を増やしたい場合は、2色目以降に続けて色と開始位置、終了位置を指定していきます。

ストライプ柄の場合は、終了位置と次の色の開始位置が同じになるように指定していきます。

.gradation {
	width: 100%;
	height: 200px;
	background: repeating-linear-gradient(90deg, #4169e1 0 15px, #87ceeb 15px 30px, #1e90ff 30px 45px);
}