vii.cx

今回、カラーセレクタをDLL化しWEBセーフカラーに対応、バージョンアップしました。
本来は「.NET」カテゴリであるべきなのかもしれませんが・・・ プログラミングと言うよりは趣味的なイメージが強いので「Hobby」カテゴリより公開します。 実際にCSSを書いてみて「これはウザイ！」と思ったことから今回のツールを作ってみました。 本当は、CSS全てが編集できるといいなぁとか思ってはみたのですが、 かなりハードルを上げることになると断念・・・ま、いつものことですが・・・ CSS3に対応したフリーのツールって今のところ無い気がするので、気が向いたら、そのうちにでも・・・

ボタンのデザインを考える時って、色々と悩みますよね？形や色、影のつけ方とか・・・ それをプレビューしながら少しずつ形にしていく為のツールです。WEBでもあるのですが、 自分ごのみなモノがなかったので挑戦してみました。 本当はリアルタイムに編集の経過を見たかったのですが、その術がなく、 ブラウザ（もちろんHTML5、CSS3対応のモノ）での確認にと安易な方法で逃げました。 IEが対応していてくれれば・・・苦しいところですが、ご了承いただければと思います。

使い方は難しくはありません
まず、初めにやらなければならないことは、プレビュー用のブラウザの指定です。 あとは、各種の情報を編集し、プレビューしつつ整形して行くだけです。 プレビューは、都度ブラウザを開いてしまうので、HTMLだけの更新も可能です。 複数開いて見比べたい場合と使い分けて頂ければと思います。 出来上がったデザインは、ツールの「Source」タブにも、プレビュー用のブラウザにも表示していますので、 コピって使えます。一応ツールでは個別のCSSファイルとして保存する機能も備えていますので必要に応じてお使いください。

「Button」タブ、主にボタン部分に関する情報を編集をします。

「Text」タブ、主にテキスト部分に関する情報を編集をします。

「Source」タブ、デザインのCSS3のソースを表示しています。

【その他のイメージ】

ブラウザのプレビューイメージ

ツールバーの「プレビュー」ボタンと「HTML出力」ボタンは前述の通り、新たにブラウザ（新しいタブ）を開く場合と、 既に開いているプレビューを更新するために使い分けてください。編集したボタンを比較して見たい場合などは新しく開いた方が良いでしょう。 逆に幾つもブラウザ（タブ）が開くのを嫌うのであれば後者でしょう？ カラーの指定は直接入力も可能ですが、テキストボックスを左クリックするだけでカラーを選択するためのウィンドウが開くので、 そこから選択できるようになっています。

色々と試行錯誤しながらデザイン考えてる時って楽しいですよね・・・ちょっと触っては確認し、また調整しての繰り返しで、 時には新しい発見があったり？でも、手打ちでCSSファイルを編集してると細かな調整が面倒臭くなってきたりして、 つい妥協してしまったりして・・・そんな時にお使い頂ければと思います。 今回のモノは「div」を使ったボタンを対象としていますが、「a（リンク）」等にも適用できます。 不要なコードも出力されますが、打つより消す方が速いので、ベンダープレフィックス等も含め、 現状では対応してないモノまでも、とにかくありったけ出しています。必要に応じて添削してください。