こんにちは、Jです。
みなさん、シームレスパターンは好きですか?好きですよね。
あの無限に続く、終わりのない柄の波。たまらないですよね。
そんなわけで、今回はCSSでシームレスパターンを作ってみました。
できる限りわかりやすく、カンタンに伝えられたらなと思いつつ、まとめてみました。
それではさっそく、作っていきましょう。
【HTML】
1 | < div class = "pattern" ></ div > |
【CSS】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .pattern { /* 背景に色をつけておきます */ background-color : aquamarine; /* background-image: linear-gradient();でグラデーションを作っていきます */ background-image : linear-gradient ( /* グラデーションの方向を0deg(下から上へ)にしておきます */ 0 deg, /* transparent(透明)から始まり、coralで終わります */ transparent 0% , coral 100% ); height : 240px ; width : 320px ; } |
すると、以下のような画像になります。
いい感じのグラデーションですね。夕日と海みたいでなんだか落ち着きます。
htmlはそのままで、cssを以下のように書き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .pattern { background-color : aquamarine; background-image : linear-gradient ( 0 deg, /* 最初の色の開始ポイントと、次の色の終了ポイントを同じ数値にするとハッキリと分かれます */ transparent 0% , transparent 50% , coral 50% , coral 100% ); height : 240px ; width : 320px ; } |
すると、以下のような画像になります。
夕日と海がバッサリ分断されました。
ちょっと単調でつまらない感じになってしまいましたが、このままボーダーのパターンを作っていきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .pattern { /* パターンサイズをbackground-sizeで指定します。それぞれ横幅・縦幅となります */ background-size : 20px 20px ; background-color : aquamarine; background-image : linear-gradient ( 0 deg, transparent 0% , transparent 50% , coral 50% , coral 100% ); height : 240px ; width : 320px ; } |
すると、以下のような画像になります。
すっごい目がチカチカしますね。
このチカチカパターンのcssの「0deg」を「90deg」に変更すると、以下のような画像になります。
こちらも目がチカチカしますね。
ではこの縦横それぞれのパターンを使用して、チェックのパターンを作っていきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .pattern { background-color : aquamarine; background-size : 20px 20px ; background-image : linear-gradient ( 0 deg, transparent 0% , transparent 50% , coral 50% , coral 100% ), /* それぞれのパターン(linear-gradient)をカンマで繋げます */ linear-gradient ( 90 deg, transparent 0% , transparent 50% , coral 50% , coral 100% ); height : 240px ; width : 320px ; } |
すると、以下のような画像になります。
目に優しくない配色ですね(涙)
このように、パターンを組み合わせることでチェックのパターンを作ることができます。
基本的な作り方は以上のようになりますので、次に本格的(?)なチェックを作ってみたいと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | .pattern { background-color : darkred; background-size : 20px 20px ; background-image : linear-gradient ( 0 deg, rgba ( 255 , 255 , 255 , 0.4 ) 0% , rgba ( 255 , 255 , 255 , 0.4 ) 3% , transparent 3% , transparent 97% , rgba ( 255 , 255 , 255 , 0.4 ) 97% , rgba ( 255 , 255 , 255 , 0.4 ) 100% ), linear-gradient ( 90 deg, rgba ( 255 , 255 , 255 , 0.4 ) 0% , rgba ( 255 , 255 , 255 , 0.4 ) 3% , transparent 3% , transparent 97% , rgba ( 255 , 255 , 255 , 0.4 ) 97% , rgba ( 255 , 255 , 255 , 0.4 ) 100% ), linear-gradient ( 0 deg, transparent 0% , transparent 25% , rgba ( 255 , 127 , 80 , 0.6 ) 25% , rgba ( 255 , 127 , 80 , 0.6 ) 75% , transparent 75% , transparent 100% ), linear-gradient ( 90 deg, transparent 0% , transparent 25% , rgba ( 255 , 127 , 80 , 0.6 ) 25% , rgba ( 255 , 127 , 80 , 0.6 ) 75% , transparent 75% , transparent 100% ); height : 240px ; width : 320px ; } |
すると、以下のような(以下略)
linear-gradientは、上にあるものが優先されて表示されるようです。
また色の指定もrgbaで指定できるので、透明度も調節が可能です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .pattern { background-color : white ; background-size : 20px 20px ; background-image : linear-gradient ( 90 deg, transparent 0% , transparent 30% , #4daeeb 30% , #4daeeb 70% , transparent 70% , transparent 100% ), linear-gradient ( 90 deg, #335179 0% , #335179 5% , transparent 5% , transparent 95% , #335179 95% , #335179 100% ); height : 240px ; width : 320px ; } |
すると、以(略)
さわやかな感じですね。ワイシャツにこんな柄があったような気がします。
このように、cssだけでも様々なパターンを作ることができます。
画像一枚で解決するじゃん!って思われるかもしれませんが、コードを書くだけで画像ができるのはやっぱり楽しいので、皆さん是非チャレンジしてみてください。