【背景】デザインに使えそうな「模様パターン」が探せる？！【CSS background patterns】とは？

みなさんこんにちは！おさかなです！

今回は「CSS background patterns」について、書いていこうと思います！

それでは、レッツゴー！！！！！

いい感じの「模様」を使いたい！

https://osakanav.com/what-is-the-method-to-display-images-only-with-css-html-css-programming

「CSS background patterns」って何？

「CSS background patterns」とは、色々な「模様パターン」がまとめられているサイトのことです。CSSで作成されているので、Webサイトの「背景」に使用でき、カスタマイズすることもできます！(いいね！)

https://superdesigner.co/tools/css-backgrounds

https://osakanav.com/dashed-border-generator

実際につかってみよう！

模様を探そう！

それでは早速サイトにアクセスします！

スクロールしてみると…？
色々な模様パターンを見ることができます！(風呂敷になりそう…笑)

気になる模様はクリックすると、実際に背景として表示されます！(おお！)

右側のパネルから、

カラー
背景カラー
サイズ
透明度

の4項目をカスタマイズできます！(ふむふむ…。)

カスタマイズが完了したら「Copy CSS」を押して、コードをコピーしましょう！(ポチッと)

(あともう少し…🚩)

CSSコードを貼り付けよう！

今回はコピーしたCSSコードをエディタに貼り付けていきたいと思います！(おー！)
↓CSSがよくわからないという方はこちら

Web開発入門完全攻略

今回は「.html」ファイルの中に<style>タグを書いて、その中にコードを貼り付けています。
※*で全体に指定。

ここが貼り付けたコードです！

表示をチェックしてみると…？
いい感じで背景が実装されました〜！(やった〜🌻)

他のパターンも素敵です…！(きれい！)

これで全ての操作は完了です。(やった～！)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました！

https://osakanav.com/rayso