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

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

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

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

Shapy を使ってみよう

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

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

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

設定項目

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

ソースコードのコピー

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

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

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