グラデーションを使って作ろう！背景パターンでストライプやボーダーの基本的な作り方

グラデーションを使ってボーダーを作ろう

グラデーションってどうやって作るの？

グラデーションは「linear-gradient」や「repeating-linear-gradient」を使って作ります。
ボーダーを作るために、縦にグラデーションで色が変わるように設定してあげましょう。
縦にグラデーションを設定する場合。
linear-gradient(1色目 1色目の位置,2色目 2色目の位置);

ニャン易度

<div class="linear_gradient_sample1"></div>

linear_gradient_sample1 {
	width: 200px;
	height: 150px;
	background: linear-gradient(#E91E63 10%, #00BCD4 90%);
}

background: linear-gradient(#E91E63 10%, #00BCD4 90%)
この場合、要素のうちの上から10%は#E91E63の単色で表示され、下から10%(100%−90%)は#00BCD4の単色で表示されます。
その間の60%(100%-[上]10%-[下]10%)がグラデーションとなります。
この80%を少なくなるように設定していくと。。。

ニャン易度

<div class="linear_gradient_sample2"></div>

.linear_gradient_sample2 {
	width: 200px;
	height: 150px;
	background: linear-gradient(#E91E63 50%, #00BCD4 50%);
}

間の%を同じ数字に（間が0%）するとグラデーション部分がなくなりきっちりとした２色になります。

ちなみにカラーの2色目の位置を0に設定して1色目を20%に設定すると太さの違うボーダーが出来上がります。

ニャン易度

<div class="linear_gradient_sample3"></div>

.linear_gradient_sample3 {
	width: 200px;
	height: 150px;
	background: linear-gradient(#E91E63 20%, #00BCD4 0);
}

これは2色目の位置を1色目より小さいものにした場合その色より以前の中で（この場合1色目）最も大きい値が指定されているものとみなされるからです。
つまり、linear-gradient(#E91E63 20%, #00BCD4 20%);と同様です。
もちろんlinear-gradient(#E91E63 50%, #00BCD4 0);であれば先ほど作ったlinear-gradient(#E91E63 50%, #00BCD4 50%);と同じになります。

繰り返しを設定しよう

繰り返しを設定するために作ったグラデーションのサイズをしてします。
background-size:幅高さ;

ニャン易度

<div class="linear_gradient_sample4"></div>

.linear_gradient_sample4 {
	width: 200px;
	height: 150px;
	background: linear-gradient(#E91E63 50%, #00BCD4 50%);
	background-size:100% 20px;
}

ボーダーなので幅は100%で、高さは20pxに指定しました。
linear-gradientとの組み合わせにより高さ20pxを100%とした50%(20px*50%=10px)が#E91E63、残りの50%が#00BCD4となります。

3色以上の場合はどうするの？

これは簡単です。色の数と位置を増やすだけです。

ニャン易度

<div class="linear_gradient_sample5"></div>

.linear_gradient_sample5 {
	width: 200px;
	height: 150px;
	background: linear-gradient(#E91E63 25%, #00BCD4 25%, #00BCD4 50%, #FFC107 50%, #FFC107 75%, #4CAF50 75%, #4CAF50 100%);
	background-size:100% 40px;
}

この場合、linear-gradientの設定は以下になります。
linear-gradient(#E91E63 25%, #00BCD4 25%, #00BCD4 50%, #FFC107 50%, #FFC107 75%, #4CAF50 75%, #4CAF50 100%)
0〜25%：まずは最初の色のストップ位置が25%「#E91E63 25%」
25%〜50%：スタート位置が25%「#00BCD4 25%」ストップ位置が50%「#00BCD4 50%」
50%〜75%：スタート位置が50%「#FFC107 50%」ストップ位置が75%「#FFC107 75%」
75%〜100%：スタート位置が75%「#4CAF50 75%」ストップ位置が100%「#4CAF50 100%」

こちらの書き方でもOKです。
linear-gradient(#E91E63 25%, #00BCD4 0, #00BCD4 50%, #FFC107 0, #FFC107 75%, #4CAF50 0, #4CAF50 100%)

じゃぁストライプを作るには？

ストライプもボーダーと同様に「linear-gradient」で設定します。
linear-gradient(グラデーションの方向, 1色目 1色目の位置,2色目 2色目の位置);
今度はグラデーションの方向の指定を追加します。
「linear-gradient」のグラデーションの方向は（to bottom）[上から下へ]がデフォルト値です。
なので、ストライプの場合は（to right）[左から右へ]を指定します。
これは(90deg)を指定したものと同じです。
また、繰り返しを設定するために作ったグラデーションのサイズは、
ストライプなので幅は20pxで、高さは100%に指定しました。
linear-gradientとの組み合わせにより幅は20pxを100%とした50%(20px*50%=10px)が#E91E63、残りの50%が#00BCD4となります。

ニャン易度

<div class="linear_gradient_sample6"></div>

.linear_gradient_sample6 {
	width: 200px;
	height: 150px;
	background: linear-gradient(to right, #E91E63 50%, #00BCD4 50%);
	background-size: 20px 100%;
}

今度は斜めストライプを作ってみよう

次は斜めのストライプを作る場合はどうでしょう？なんとな〜く、ストライプを斜めに角度を入れればいいんじゃないか？
そう思いますよね。
まずは45度のストライプを見てみましょう。
linear-gradient(45deg, #E91E63 25%, #00BCD4 0, #00BCD4 50%, #E91E63 0, #E91E63 75%, #00BCD4 0, #00BCD4 100%);
background-size: 28px 28px;
幅20px(1色目10px2色目10px)のストライプを作成したい場合
三平方の定理を思い出してください。思い出せないけど…。
2×10√2=28.2842712475なので28pxで指定しています。

ニャン易度

<div class="linear_gradient_sample7"></div>

.linear_gradient_sample7 {
	width: 200px;
	height: 150px;
	background: linear-gradient(45deg, #E91E63 25%, #00BCD4 0, #00BCD4 50%, #E91E63 0, #E91E63 75%, #00BCD4 0, #00BCD4 100%);
	background-size: 28px 28px;
}

うまくいったようですが、気分によってはもうちょっと傾けたい思こともあります。それに4色だったらどうだろう？とか。
これを30度にしてみましょう。

ニャン易度

<div class="linear_gradient_sample8"></div>

.linear_gradient_sample8 {
	width: 200px;
	height: 150px;
	background: linear-gradient(30deg, #E91E63 25%, #00BCD4 0, #00BCD4 50%, #E91E63 0, #E91E63 75%, #00BCD4 0, #00BCD4 100%);
	background-size: 28px 28px;
}

残念なことになってしまいました。なんか面倒くさいです。
こんな時は「linear-gradient」ではなく「repeating-linear-gradient」を使うとうまくいきます。

ニャン易度

<div class="linear_gradient_sample9"></div>

.linear_gradient_sample9 {
	width: 200px;
	height: 150px;
	background: repeating-linear-gradient(30deg, #E91E63 0, #E91E63 10px, #00BCD4 10px, #00BCD4 20px);
}

「repeating-linear-gradient」ではグラデーションの繰り返しを設定できますので、「background-size」の指定はいらなくなります。
三平方の定理も忘れることができます。
その代わり色の位置は実際のストライプのサイズを入れます。
今回の場合、1色目10px、2色目10pxの合計20pxのストライプなので図のようになります。

repeating-linear-gradient(グラデーションの方向, 1色目のスタート位置(実際のサイズ), 1色目 1色目のストップ位置(実際のサイズ), 2色目 2色目のスタート位置(実際のサイズ), 2色目 2色目のストップ位置(実際のサイズ));
「repeating-linear-gradient」を使えば複雑な角度のストライプが作成できますね。