WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

mane

2020/10/23

グラデーションを確認しながら、簡単に作れるジェネレーター「Shapy」

投稿者: mane
カテゴリー: マークアップ >CSS

Webサイトのコーディングをおこなっていて、デザインでグラデーションが出てくると、「どうしよう・・・」と思うことありませんか?
そんな時、グラデーションの割合や角度を確認しながら簡単にコードが発行できる便利なグラデーションジェネレーター【Shapy】をご紹介いたします。
グラデーションジェネレーターはたくさんありますが、その中でも【Shapy】はとても使いやすいのでおすすめです。

それではさっそく、使い方をご紹介いたします。

Shapy を使ってみよう

まずはサイトにアクセス!

まずはこちらのサイトにアクセス↓↓
Shapy

左側が設定画面。
右側がプレビュー画面になっています。
かなり大きいので見やすいです。

設定項目

① 「Gradient Type」ここでグラデーションの形を決めます
② 色のついた●をクリックして任意のカラーを入力します
③ グラデーションの割合を調整できます
④ +を押せば色を足すことができ、-を押せば減らすことができます
⑤ 色を反転させることができます
⑥ グラデーションの角度を変更できます

ソースコードのコピー

設定画面の一番下辺りに「Add Gradient」とあるのでこちらをクリック。
すると、プレビュー画面の下にコードが保存されます。
各グラデーションのコードごとに「Edit」と「Delete」ボタンが表示されるので、保存したグラデーションを編集・削除することができます。

「Copy CSS」をクリックすれば、保存したグラデーション全てをコピーすることができます。

これを使えば、グラデーションの作成時間を短縮できますね。
ぜひ試してみて下さい。

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ