<p class="thumb"><img src="http://cdn.zako.org/images/2015/04/gradientgenerator.png" alt="Gradient Generator" width="592" height="323" class="alignnone size-full wp-image-29535" /></p>
<p>CSS3のグラデーションを思い通りに作りたいとき、便利なジェネレーターを使うのがもっとも効率よいのですが、意外とどのツールも細かい部分で融通がきかないというケースが多いと感じます。</p>
<p>今回ご紹介するグラデーション ジェネレーターは、そういった細かい部分でも融通がきくものになっていて、思い通りのグラデーションを実現するのに役立ちそうなものになっています。</p>
<!--more-->
<h3 class="header-label">かゆいところに手が届くCSS3 グラデーションジェネレーター「Gradient Generator」</h3>
<p>「<a target="_blank" href="http://gradientgenerator.com/">Gradient Generator</a>」は、<strong>手軽にCSS3のグラデーションを作成できるオンラインツール。</strong></p>
<p>手軽に作れるだけでなく、微妙な色の調整や色が変化するポイントの調整、あるいはグラデーションの方向などといった微細な部分を調節できるようになっているのが特徴です。</p>

<h4 class="tips">手軽にグラデーションCSSを生成</h4>
[caption id="attachment_29534" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/04/gradient-generate.png" alt="プリセットからグラデーションのパターンを選ぶだけでグラデーションのCSSを生成。" width="592" height="495" class="size-full wp-image-29534" /> プリセットからグラデーションのパターンを選ぶだけでグラデーションのCSSを生成。[/caption]
<p>グラデーションCSSの生成手順はいたってシンプル。プリセットから使いたいパターンを選択して、「Get CSS」ボタンを押すだけでOKです。</p>
[caption id="attachment_29533" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/04/gradient-css.png" alt="「Get CSS」ボタンを押すとCSSが生成されます。" width="592" height="493" class="size-full wp-image-29533" /> 「Get CSS」ボタンを押すとCSSが生成されます。[/caption]
<p>生成されるCSSには、IE8以下やIE9、iOS 3.2以上、Android 2.3以下といったものに対応するハックも含まれています。これもまたかゆいところに手が届いていて助かりますね。</p>

<h4 class="tips">微妙な色の調整もできる</h4>
[caption id="attachment_29532" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/04/gradient-color.png" alt="微妙な色合いも、スライダーでカンタンに調節できます。" width="592" height="445" class="size-full wp-image-29532" /> 微妙な色合いも、スライダーでカンタンに調節できます。[/caption]
<p>「Adjust color」ボタンを押せば、スライダで微妙な色合いを調整することができます。個人的にカラーピッカーよりもスライダで調整するほうが色を作りやすいので、これも重宝しそう。</p>

<h4 class="tips">グラデーションタイプや方向も自由自在</h4>
[caption id="attachment_29531" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/04/gradient-type.png" alt="かなり細かい調整までも可能。" width="592" height="392" class="size-full wp-image-29531" /> かなり細かい調整までも可能。[/caption]
<p>グラデーションの細かい表現も調整できます。グラデーションタイプをlinearかradialで選択したり、シェイプをcircleかellipseから選んだり、コーナーの角丸の大きさを選んだり等々、挙げていたらきりがないほど細かい調整をできてしまいます。</p>

[caption id="attachment_29530" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/04/gradient-config.png" alt="「Config」ボタンを押せば、CSS周りの設定もおこなえます。" width="592" height="386" class="size-full wp-image-29530" /> 「Config」ボタンを押せば、CSS周りの設定もおこなえます。[/caption]
<p>さらにCSS周りの調整も可能。セレクタを自分の環境に合わせて変更したり、対応ブラウザを設定したり、カラーフォーマットを変えたりなどなど、こちらも詳細まで設定することが可能です。</p>

[caption id="attachment_29529" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/04/gradient-options.png" alt="そしてさらに、作成したグラデーションを保存したり、PNG形式の画像でエクスポートしたり、はたまたQRコードやパーマリンクで共有できてしまったりと、至れり尽くせりです。" width="592" height="104" class="size-full wp-image-29529" /> そしてさらに、作成したグラデーションを保存したり、PNG形式の画像でエクスポートしたり、はたまたQRコードやパーマリンクで共有できてしまったりと、至れり尽くせりです。[/caption]

<p>試してみたいかたは<a target="_blank" href="http://gradientgenerator.com/">Gradient Generator</a>へどうぞ。</p>
