LPでよく使う背景５パターンをCSSで作ってみよう！

こんにちは！　吉田です！

本日は
コーディング動画を
お届けします！

テーマは..

LPでよく使う
背景５パターンを
CSSで作ってみよう！

です！

あまり知られて
いないのですが

簡単な背景であれば
従来のように
デザインを切り貼りしなくても
CSSで作れてしまったりします。

少し前はできなかったのに、
めちゃ便利になりましたよね。。。

従来の作業だと

・背景素材をリピートしやすい形でトリミング
・backgroundでリピートさせる

というのが
一般的でしたが

これがブラウザ上で
ズレたり上手くなじまなかったりで
地味に面倒だったんですよね。。。笑

なので、もはや
背景素材がCSSで作れるなら
ファイル容量も軽いし楽！

ということで、

今回は背景素材の
使用頻度の高い

・方眼紙
・ストライプ
・ドット
・チェック×2種類

この５つをご用意しました！

ちなみに、
今回のはすべて
ジェネレータや
お役立ちサイトを使って
作ったものです！

「じゃあジェネレータとか
お役立ちサイトだけでいいじゃん」

と思うかもしれませんが..

ジェネレーターで作った素材と
実際のデザインが微妙に違うことは
まあまああります。

なので、
ジェネレーターを使うなら
それをカスタムするやり方も
セットで知っておかないと
実務でフルに有効活用はできません。

なので、
今回はカスタムの方法に
重点を置いて動画をお届けしています。

ちょっと長めの動画ですが
見たい素材のところだけ流しながら
ぜひ手を動かして書いてみてくださいね！

■今回使ったファイルはこちら
https://salesdesign-school.jp/mihon/sample-5pattern.zip

■liner-gradientの使い方参考はこちら
https://saruwakakun.com/html-css/basic/linear-radial-gradient
https://ics.media/entry/200212/

■ジェネレーターや、パターンCSSお役立ちサイト
https://naruhodo.repop.jp/css-background-design/
https://1-notes.com/stripe-pattern-css-generator/
https://1-notes.com/check-pattern-css-generator/
https://www.esz.co.jp/blog/2766.html

ではでは！

吉田