みなさんこんにちは!おさかなです!
今回は「SVG backgrounds」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・SVG形式の画像を使いたい方
・高画質な「背景画像」を使いたい方
・WebデザインやCSSを勉強している方
高画質な「背景画像」がほしい~!

フルスクリーンでも綺麗に表示される「背景画像」ってないかな…?

あるよ。

おおっ!?

「SVG backgrounds」って何?
「SVG backgrounds」とは、SVG形式の画像を無料でダウンロードできるサイトのことです。
すべてのブラウザでサポートされており、CSSで使える16進数のカラーコードを表示してくれたり、色や透明度などカスタマイズができたりします!(いいね!)


実際につかってみよう!
それでは早速サイトにアクセスします!

「TRY ME」と矢印のある、◯をクリックすると…?

こんな感じで、サイトの背景画像が「黄色」のものに変わってしまいました!(魔法みたい~🌟)

カスタマイズしてみよう!
左側にカラーの詳細が表示されます!

一番上が「色の名前」By~は「製作者」が表示されていますね。(ふむふむ…。)


この色は”Liquid Cheese”って名前だったんだ!
「Customize」というブロックから、お好みのカラーにカスタマイズすることができます!
「COLOR」… 色
「BLEND」… ブレンド
「OPACITY」… 透明度

「HIDE UI」を押すと、画像の全体を見ることができます!(ほうほう…。)

こんな感じ…!(おおおお~っ✨)

画像の使用準備!
カスタマイズが完了したら画像の使用準備をしていきましょう!
使用方法は「CSSコード」を利用するか「SVG形式の画像」を保存するかの、2パターンあるので、ご自身の使いやすい方でOKです。
「CSSコード」を使用する場合
コードを使用する場合は「CSS Output」という項目の下にあるものをコピーすればOKです!

「SVG形式の画像」を使用する場合
SVG形式の画像を保存する場合は「DOWNLOAD SVG」というボタンをクリックして、画像を保存しましょう!

画像使用の「注意点」!
個人や商用で画像を使用する場合は、「無料のクレジット表記(FREE W/ATRIBUTION) 」または「有料ライセンスの取得(BUY LICENSE) 」を行う必要があります!

クレジット表記をする場合は、ページ下にあるCSSコードを貼り付ければOKです!

BUY LICENSE
有料ライセンスを購入すれば、更に多くのデザインを利用することができます!(おお!)

(あと、もうちょっと…🍊)

他にもたくさんのデザインが!
それでは最後に、いくつかのデザインを紹介して終わりにしたいと思います!
みなさんの作品が、更に良いものになりますように…🌟
(立体感があってすごい…!)

(大人っぽいシマシマ!)

(高級感あふれる赤と黒!かっこいい…✨)

(なんか、PCの基盤みたいだな…?!笑)

(まるまる!かわいい!)

(アイスクリーム屋さんみたいな、ストライプ!)

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

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