はじめまして。新規事業部 コーディング担当のキテレツです。
キテレツというのは入社時に決めたあだ名ですが全く浸透してません‥
ありがちなネタではありますが、今回はCSS3のジェネレータをまとめて紹介したいと思います。
ジェネレータの一番の利点はブラウザ上で視覚的に確認できる事にあります。
プロパティ名を覚える事ももちろん重要ですが、時間が限られてる時や、ｱﾚ・・うまく動かない‥といった時に使えます。
今日は僕が使っているor使ったことのあるジェネレータを紹介していきます。
CSS3 Generator
色々なプロパティに対応しているジェネレータで数値を入力してカスタマイズできます。
CSS3 Generator – By Eric Hoffman & Peter Funk
角丸、ボックスシャドウ、グラデーション、透過の設定ができます。
スライダを動かして数値を変えられるのが便利です。
CSS3.0 Maker
これもスライダで数値を変えながら各種プロパティをいじれます。
デザインもなんかオシャレです
border-image-generator
border-imageを使うケース自体がそんなにないんですが・・画像borderを作ってくれるジェネレータです。
ニッチですが使いたい画像をアップロードし、テストできます。
細かい調整が難しいとこなのでジェネレータがあれば捗りますね
Grad3
グラデーションを生成するジェネレータです。
個人的に調整されたグラデだけをさくっと欲しい時はコレを使います。
角丸具合やbox-shadowも変えられますが、あくまでグラデの調整で使うのが便利だと思います。PhotoShopライクなグラデーションバーで使い易いです。
CSS Arrow Please
CSS3ならではの表現、矢印付きの吹き出しを作るジェネレータです。
なんてニッチなのだろうと思いつつ、作らないといけないケースが来た時には感謝できます・・
矢印表示位置を上下左右から選択でき、borderの太さなどもカスタマイズできます。
prefixMyCSS
CSSをペースト→クリックでベンダープレフィックスを自動で付けるジェネレータです。
既についてる場合は重複・・とはならずに付いてないものを補完するので、最終チェック的な使い方ができると思います。
インデント具合やコメントアウトの有無などがオプションで選択できます。
CSS3プロパティジェネレーター
http://css-eblog.com/eblog_sample/0912/css3-generator/
最後は日本語仕様ものを。
グラデ、ドロップシャドウ、テキストシャドウ、角丸を設定できます。
上に挙げたものはポピュラーなものかつ、一部なのでもっと便利なジェネレータが沢山あると思います。
（もっとニッチなパーツ作成だけのものも）
これがベスト！と言えるものは難しいですが、自分にあったジェネレータを探すのは楽しい+勉強になると思います。
※ジェネレータに頼り過ぎるのはアレなのでほどほどに。。参考程度にしたいものです。
