Parts & Tips

CSSグラデーション関数を利用したパターンデザインサンプル

CSSグラデーション関数を利用したパターンデザインのサンプルです。class名、色などは適宜変更してください。
以下サンプルをもとに、いろいろいじってみるのもたのしいと思います。

CSSグラデーションパターンは、divやarticle、section要素などに背景としてbackgroundプロパティを使用して指定します。

各サンプルでは表示領域確保のため、以下のCSSを共通であてています。divやarticle、section要素などで利用する場合は、これらに内包される文字情報や画像などの要素により領域（とくに高さ）は確保されるため、通常このような指定は不要です。

css
.pattern {
  width: 100%;
  height: 130px;
}

パターンサンプル1 ​

ストライプパターン

html
<div class="pattern"></div>
css
.pattern {
  background: repeating-linear-gradient(0, #454545, #454545 20px, #fff 20px, #fff 40px);
}

一番シンプルな基本の形です。繰り返しのパターンを作成するので、linear-gradient()ではなくrepeating-linear-gradient()を利用します（linear-gradient()を使用することが間違っているということではありません）

ざっくりした説明になりますが、()の中の指定は、左から順番に以下を表しています。

  • 角度
  • 1つめの色（開始地点は0）
  • 1つめの色およびその終了地点
  • 2つめの色およびその開始地点
  • 2つめの色およびその終了地点

開始と終了の色を別の色にすると、グラデーションになります。同色にすることで、ストライプパターンを作成しています。
サンプルでは2色ですが、3色以上も指定可能です。
なお、開始地点や終了地点の単位はpxのほか、%やemなどCSSで利用できる単位が指定可能です（以降同様です）

開始地点と終了地点の数値を変更すると、細い（太い）ものや幅がばらばらのストライプを作成できます。

パターンサンプル2 ​

縦ストライプパターン

html
<div class="pattern"></div>
css
.pattern {
  background: repeating-linear-gradient(90deg, #454545, #454545 20px, #fff 20px, #fff 40px);
}

パターン1の縦バージョンです。角度を90度回転させています（CSSでは角度の単位にdeg（Degreeの略）を使用します）

パターンサンプル3 ​

斜めストライプパターン

html
<div class="pattern"></div>
css
.pattern {
  background: repeating-linear-gradient(-45deg, #454545, #454545 20px, #fff 20px, #fff 40px);
}

斜めストライプの場合は、幅をあまり細くし過ぎるとストライプがきれいに描画されないので注意が必要です。

パターンサンプル4 ​

方眼紙のようなマス目パターン

html
<div class="pattern"></div>
css
.pattern {
  background: 
    repeating-linear-gradient(0, transparent 0 9px, #454545 9px 10px) -5px -5px / 10px 10px,
    repeating-linear-gradient(90deg,  transparent 0 9px, #454545 9px 10px) -5px -5px / 10px 10px;
}

横ストライプパターンに縦ストライプパターンを重ねて、方眼紙のようなマス目パターンを実現しています。
transparentは透明色です。-5px -5px / 10px 10pxの部分は、それぞれ位置（background-position）とサイズ（background-size）を指定しています。位置は要素の左上が起点です。
背景色を指定したい場合は、別途background-colorで色を指定します（2つめのパターンを指定した後、,（カンマ）区切りで色を指定することも可能です）

上記repeating-linear-gradient()の中身は以下を簡略化しています。開始地点と終了地点の色が同じ場合は、終了地点の色記述を省略できます。

css
.pattern {
  background:
    repeating-linear-gradient(0, transparent, transparent 9px, #454545 9px, #454545 10px) -5px -5px / 10px 10px,
    repeating-linear-gradient(90deg, transparent, transparent 9px, #454545 9px, #454545 10px) -5px -5px / 10px 10px;
}

パターン部分の数値やサイズを変更することで、大きいマス目などを描画できます。

パターンサンプル5 ​

市松模様パターン

html
<div class="pattern"></div>
css
.pattern {
  background: 
    linear-gradient(45deg, #454545 25%, transparent 25%, transparent 75%, #454545 75%) 0 0 / 30px 30px,
    linear-gradient(45deg, #454545 25%, transparent 25%, transparent 75%, #454545 75%) 15px 15px / 30px 30px,
    #fff;
}

市松模様のパターンです。最後に指定している, #fffはパターンの背景色です。

CSSグラデーションで三角（の変則形）をつくり、それを合わせることで正方形としています。以下はlinear-gradient()で指定している最初の色をそれぞれ赤に変更してみたものです。

以下は2つめのlinear-gradient()を非表示にした状態のものです。角度を0にすると通常のストライプ（透明色の幅が広め）ですが、45degを指定することで三角が表現されます。

パターンサンプル6 ​

チェック柄のパターン

html
<div class="pattern"></div>
css
.pattern {
  background :
    repeating-linear-gradient(0, rgb(213 57 62 / 0.5), rgb(213 57 62 / 0.5) 30px, transparent 30px, transparent 60px) 10px 10px,
    repeating-linear-gradient(90deg, rgb(213 57 62 / 0.5), rgb(213 57 62 / 0.5) 30px, transparent 30px, transparent 60px),
    #fff;
}

透過度を指定するためにrgb()関数を利用して色指定をします（CSSでよく利用される#からはじまる16進数の表記はHEX値といいます）
rgb()関数ではrgb(R値 G値 B値 / 透過度)を指定します。透過度は0〜1の間を指定します（上記では透過度50%（0.5）に指定）
透過度が100%（1）の場合、指定は省略できます。

最初のrepeating-linear-gradient()に指定している10px 10pxは位置（backgroud-position）、最後に指定している, #fffはパターンの背景色です。

パターンサンプル7 ​

ドットパターン

html
<div class="pattern"></div>
css
.pattern {
  background: radial-gradient(#454545 2px, #fff 2px) -5px -5px / 20px 20px;
}

radial-gradient()は円グラデーションを作成する関数です。repeating-radial-gradient()という関数もありますが、ドットパターンの場合はradial-gradient()を利用します。

ざっくりした説明になりますが、()の中の指定は左から順番に以下を表しています。

  • グラデーションの起点位置（省略の場合は初期値の中心（center）から）
  • 1つめの色と中心からの半径
  • 2つめの色と中心からの開始位置

1つめと2つめの数値を合わせることで、境界がはっきりしたドットを作成できます（2つめの数値を大きくするとぼやけます）
数値を大きくすると、大きいドットを描画できます。

-5px -5px / 20px 20pxはそれぞれ位置とサイズをを指定しています。サイズの数値を変えることで、ドットの間隔を詰めたり広げたりできます。

パターンサンプル8 ​

斜めのドットパターン

html
<div class="pattern"></div>
css
.pattern {
  background: 
    radial-gradient(#454545 2px, transparent 2px) 0 0 / 40px 40px,
    radial-gradient(#454545 2px, #fff 2px) 20px 20px / 40px 40px;
}

1つめのradial-gradient()の2つめの色をtransparent（透明色）にしています。これは1つめのradial-gradient()が2つめのradial-gradient()に重なるためです。

0 0 / 40px 40pxや20px 20px / 40px 40pxはそれぞれ位置やサイズの指定です。この数値を変更すると、変則的なドットパターンを作成できます。

< Back to Home