読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

CSS3の本当に使えるジェネレーターまとめ11個

スポンサードリンク

CSS3でコーディングの幅がだいぶ広がりましたね。

しかし、その反面記述が複雑で覚えにくいのが難点です。

そんな時はジェネレーターで直感的にコードを生成した方が効率的です。

今日はそんなCSS3のジェネレーターの中で本当に使ってるサービスをご紹介します。

グラデーション

f:id:funclur:20170308235415p:plain

www.colorzilla.com

グラデーションはよくお世話になってるジェネレーターです。
sassのmixinを用意しているときは不要ですが、直のcssを書くときは重宝します。

吹き出し

f:id:funclur:20170308235418p:plain

www.cssarrowplease.com

box-shadow border-radius

f:id:funclur:20170308235421p:plain

www.bad-company.jp

吹き出しのデザインが上がってきたらこちらを利用させていただきます。

三角形

f:id:funclur:20170308235425p:plain

apps.eky.hk

未だに三角形の作り方よく覚えてないのですが、こちらをコピーした方が早い気がしてあまり覚える気にならないというのはいい訳です:-(

カラム

f:id:funclur:20170308235433p:plain

www.debray-jerome.fr

columnプロパティを使ったことがありませんでしたが、このジェネレーターで知って使ってみたくなりました。

transform

f:id:funclur:20170308235437p:plain

ds-overdesign.com

transform、アニメーションはなかなか理解することが難しいですが、ジェネレーターで直感的に作ることができますね。

アニメーション

f:id:funclur:20170308235437p:plain

matthewlein.com

cssanimate.com

ボタン

f:id:funclur:20170308235439p:plain

http://css3buttongenerator.com/css3buttongenerator.com

f:id:funclur:20170308235442p:plain

http://noht.co.jp/2_5dbuttonnoht.co.jp

こちらのボタンジェネレーターではグラデーションなど複合的にcss3を利用することができます。

form

f:id:funclur:20170308235447p:plain

http://livetools.uiparade.com/form-builder.htmllivetools.uiparade.com

formも今やデザインが良くされていることが多いですね。むしろデフォルトのフォームは今や見ることがなさそうです。

オールマイティー13種類

f:id:funclur:20170308235449p:plain

css3generator.com

こちらはトータルでcss3のジェネレーターが用意されています。

まとめ

いかがでしょうか。

どれも使えるありがたいジェネレーターですね。

特に最初の4つはよく業務でよく使用しています。

同じことが実現できるのもありますが、微妙に使い勝手などは違うので、自分に合うジェネレーターで業務効率化させましょう!