SONICMOOV Googleページ

もうCSS3の書き方につまづかない! CSS3ジェネレータのまとめ

もうCSS3の書き方につまづかない! CSS3ジェネレータのまとめ

  • このエントリーをはてなブックマークに追加

はじめまして。新規事業部 コーディング担当のキテレツです。
キテレツというのは入社時に決めたあだ名ですが全く浸透してません‥

ありがちなネタではありますが、今回はCSS3のジェネレータをまとめて紹介したいと思います。
ジェネレータの一番の利点はブラウザ上で視覚的に確認できる事にあります。
プロパティ名を覚える事ももちろん重要ですが、時間が限られてる時や、アレ・・うまく動かない‥といった時に使えます。
今日は僕が使っているor使ったことのあるジェネレータを紹介していきます。

CSS3 Generator


http://css3generator.com/

色々なプロパティに対応しているジェネレータで数値を入力してカスタマイズできます。

CSS3 Generator – By Eric Hoffman & Peter Funk


http://www.css3.me/

角丸、ボックスシャドウ、グラデーション、透過の設定ができます。
スライダを動かして数値を変えられるのが便利です。

CSS3.0 Maker


http://www.css3maker.com/

これもスライダで数値を変えながら各種プロパティをいじれます。
デザインもなんかオシャレです

続きを読む

border-image-generator


http://border-image.com/

border-imageを使うケース自体がそんなにないんですが・・画像borderを作ってくれるジェネレータです。
ニッチですが使いたい画像をアップロードし、テストできます。
細かい調整が難しいとこなのでジェネレータがあれば捗りますね

Grad3


http://grad3.ecoloniq.jp/

グラデーションを生成するジェネレータです。
個人的に調整されたグラデだけをさくっと欲しい時はコレを使います。
角丸具合やbox-shadowも変えられますが、あくまでグラデの調整で使うのが便利だと思います。PhotoShopライクなグラデーションバーで使い易いです。

CSS Arrow Please


http://cssarrowplease.com/

CSS3ならではの表現、矢印付きの吹き出しを作るジェネレータです。
なんてニッチなのだろうと思いつつ、作らないといけないケースが来た時には感謝できます・・
矢印表示位置を上下左右から選択でき、borderの太さなどもカスタマイズできます。

prefixMyCSS


http://prefixmycss.com/

CSSをペースト→クリックでベンダープレフィックスを自動で付けるジェネレータです。
既についてる場合は重複・・とはならずに付いてないものを補完するので、最終チェック的な使い方ができると思います。
インデント具合やコメントアウトの有無などがオプションで選択できます。

CSS3プロパティジェネレーター


http://css-eblog.com/eblog_sample/0912/css3-generator/

最後は日本語仕様ものを。
グラデ、ドロップシャドウ、テキストシャドウ、角丸を設定できます。

上に挙げたものはポピュラーなものかつ、一部なのでもっと便利なジェネレータが沢山あると思います。
(もっとニッチなパーツ作成だけのものも)
これがベスト!と言えるものは難しいですが、自分にあったジェネレータを探すのは楽しい+勉強になると思います。
※ジェネレータに頼り過ぎるのはアレなのでほどほどに。。参考程度にしたいものです。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

キテレツ(フロントエンドエンジニア)

ソリューション事業部 コーディング担当のキテレツです。 キテレツというのは入社時に決めたあだ名ですが全く浸透してません‥

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation