グラデーション編集支援ツール作成!

イラストレーターなどでももちろんグラデーションは作れますが、CSSでグラデーションの指定ができるように、そのコードを作成・編集するためのツールを作りました。

気の早い方は、実物をご覧ください(笑)

今回のブログでは、主な特徴と使い方の説明だけさせていただきます。

いずれ、作成方法の主なところなどについて、解説させていただこうかと思います。

主な特徴

○ HSLの色相、彩度、明度、RGBの各値は、実際の色を見ながら、スライドバーによる移動と、上下のボタンによって調整でき、全て連動しています。(インジケーターの赤枠の中が全て同じ色になりますので、どちらにバーを動かすとどんな色に調整できるすすぐにわかります。)

○ グラデーションは、線形、円形、扇型の三種類に対応しており、三種類の場合とも、繰り返しによって縞模様のようにすることができます。

○ グラデーションに使う色は何色でも増やすことができ、色の順番をドラッグ&ドロップで入れ替えることができ、また、特定の色だけ、後から編集することもできます。

○ 線形の場合は角度、円形の場合は形状、中心の位置、扇型の場合は開始角度、中心位置を指定できます。それらも全て、連動してサンプル画面が動きますので、最適なデザインを決めるのに便利です。

使い方

  1. まず、線形グラデーションにするのか、円形グラデーション にするのか、扇型グラデーションにするのか、選択してください。(スマホでは少しスクロールした下の方にあります。PCでは右上にあります。)
  2. 縞模様のように繰り返したい場合は、「繰り返す(縞模様にする)」にチェックを入れてください。)
  3. まず一つの色を編集します。(スマホでは最初にあります。PCでは左側にあります。)初期値は赤色ですが、スライドバーをドラッグしたり、上下のボタンをクリックして色の調整を行います。
  4. 色の調整が終わったら、「取得」ボタンで色を取り込みます。小さいアイコンに色がコピーされ、RGB方式の色番号も記載されます。
  5. 二色目以降は、「色の追加」ボタンをクリックして編集できるボックスを追加し、先ほどと同じようにして、色を編集の上「取得」します。
  6. 二つ以上の色が取得できたら、色をグラデーションで切り替える場所を%で決定します。編集画面の各色の一番右側にあるボックスで編集します。(上の色より大きな数字を指定するのが基本です。)
  7. もし、色の順番を変えたければ、隙間のところをドラッグして並び替えることができまくす。
  8. グラデーションの角度、中心位置等を変えたければ、それぞれのボックスで変更してください。
  9. 各色を変更したい場合は、新たに「取得」することもできますが、左側の○印にチェックを入れた上で、色の編集を行えば、それに連動して対応するボックスの値やサンプル画面の色合いが変わります。
  10. 編集画面の下に、CSSコードが表示されますので、コピーし、「background: 」を最初につけて、ご活用ください、

まとめ

CSSコードで、このような支援ツールなしに、グラデーションの細かい設定を行うは結構面倒です。

これをお使いいただくと、気軽にグラデーションを利用してみようという気になるのではないでしょうか。

色の切り替え部分の%を同じにしたすると、グラデーションではなく完全に色をくっきりと切り替えることもでき、色々なストライプ模様を作ったりすることもできますので、工夫してください。

なお、ここでは、とりあえず取り入れていませんが、他の書式を使うことも可能です。

気がついた限り書いておきますので、参考にしてください。

○ RGBの指定は、三桁にすることもできますし、rgb(255,255,255)のようにもできますし、HSLを使うこともできます。RGBAも使えるようです。

○透明の「transparent」の指定も可能のようです。

○位置は、「center left」なども使用可能です。

○グラデーションが切り替わる位置をpxなどで指定することも可能です。

○一部指定値を省略することもできます。

課題

もし、使う人が多いようでしたら(多分それほどではないと思うので(笑))、特に次のような点で改善させていただきます。

○ ボックスに数字を直接書き込めるようにし、書き込んだ場合も、スライドバーや他の数値やサンプル画面が連動して変わるようにする。

○すでに取り込んだ一つの色を選択した時、色編集画面の色番号やバーの位置が連動して変わるようにする。

○色を並べ替えた時や新たに色を取得した時も、瞬時にサンプル画面の表示が変わる。また、グラデーションの切り替え位置を表す%の数字は並び変わらないようにする。

○出来上がったコードのクリップボードへのコピーボタンを付ける。

もし、不具合がありましたら、お知らせいただければ幸いです。

色相環の図は、ここのサイトを参考にさせていただきました。ありがとうございました。

https://q-az.net/javascript-color-wheel/