【CSS・SVGあり】高画質な【背景画像】がたくさん使えちゃう【SVG backgrounds】とは?

Technology
スポンサーリンク

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

今回は「SVG backgrounds」について、書いていこうと思います!

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

想定読者
・SVG形式の画像を使いたい方
・高画質な「背景画像」を使いたい方
・WebデザインやCSSを勉強している方

高画質な「背景画像」がほしい~!

おさかな
おさかな

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

ナビまる
ナビまる

あるよ。

おさかな
おさかな

おおっ!?

誰でもかんたんに「ポートフォリオ」が作れちゃう?!「Portfoliobox」とは?
みなさんこんにちは!おさかなです!今回は「Portfoliobox」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・無料でホームページを作成したい方・ポートフォリオを作成したい方・Port...

「SVG backgrounds」って何?

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

Create Customizable, Hi-Def, and Scalable Backgrounds
SVG Backgrounds hosts a collection of customizable SVG-based repeating patterns and backgrounds for websites and blogs.
誰でもかんたんにプロっぽいデザインが作れちゃう?「Canva」とは?
みなさんこんにちは!おさかなです!今回は「Canva」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・デザインソフトを探している方・テンプレートからデザインをしたい方・クリエーターの方...

実際につかってみよう!

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

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) 」を行う必要があります!

FREE W/ATRIBUTION

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

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

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

【無料】ペットの悩みについて気軽に「相談」できちゃう「DOQAT」とは?【オンライン】
みなさんこんにちは!おさかなです!今回は「DOQAT」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・オンラインでペットの悩み相談がしたい方・無料で相談がしたい方・犬猫を飼っている方...

他にもたくさんのデザインが!

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

(立体感があってすごい…!)

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

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

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

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

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

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

【アバター モデル販売】Live2D公式マーケット「nizima」とは?
みなさんこんにちは!おさかなです!今回は「nizima」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・Live2Dのモデルを探している方・Live2Dモデルを販売したい方・オーダーメイド...

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

おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。引っ越し以外の理由で3回も転校したのに、結局中卒。
現在はマイペースに「プログラム」書いたり、「作曲」したり「文章」書いたり色々してます。
SAOのユウキが好きです!

おさかなをフォローする

この記事は役に立ちましたか?

タイトルとURLをコピーしました