CSSを書くときに便利なジェネレーター7選＋α

こんにちは！スタッフのめぐみです。今回は CSS を書くときにちょっと便利なジェネレーターを集めてみました。HTML や CSS を書き始めたばかりの初心者の方は参考にしてみるといいかもしれません。

1. CSS3 Generator

URL

http://css3generator.com/

「Choose Something」と書かれた箇所をクリックすると、CSS3 のプロパティが表示されます。さらに各プロパティ名をクリックすると、ジェネレーターが表示され項目を入力するとその場で指定の CSS を生成することができます。プロパティによっては他のジェネレーターのサイトのリンクが貼ってある場合もあります。

2. CSS3 Click Chart

URL

http://css3clickchart.com/

各 CSS3 のプロパティをクリックすると、サンプルコードとライブプレビューを吐き出してくれます。そのプロパティが現在どのブラウザ(PC / mobile / tablet)でサポートされているのかも教えてくれます。

3. CSS triangle generator

URL

http://apps.eky.hk/css-triangle-generator/

CSS で三角形を書くようなときに重宝するジェネレーターですね。普段あまり書かない CSS はこういったものをうまく利用して楽したいところです。

4. CSS ARROW PLEASE!

URL

http://cssarrowplease.com/

こちらは CSS で吹き出しが作れるジェネレーターです。position(arrow の位置), size, color, border color, border width をそれぞれ入力するとお好みの吹き出しを生成してくれます。

5. CSS Button Generator

URL

http://css3buttongenerator.com/

このジェネレーターは、jQuery のプラグインでお馴染みの bxSlider を開発した bxCreative が作ったようです。必要な箇所を入力するとボタンを生成してくれます。hover した時の CSS も生成してくれるので便利ですね。

6. Ultimate CSS Gradient Generator

URL

http://www.colorzilla.com/gradient-editor/

グラデーションを生成してくれます。例えば CSS でボタンを実装して背景色をグラデーションにして立体感を出したい…というような時など様々な用途に使えそうですね。

7. Simple Sharing Buttons Generator

URL

http://simplesharingbuttons.com/

Simple Sharing Buttons Generator は Twitter や facebook などの SNS シェアボタンを生成してくれるサイトです。画面の指示に従って項目を選択または入力すると素敵なシェアボタンを生成してくれます。
GitHub ページはこちら。

+α

Can I use ?

URL

http://caniuse.com/

Can I use? はその CSS プロパティがどのブラウザのどのバージョンで使えるのかを一覧で表示してくれるサイトです。
例えば「box-shadow」と入力すると、以下のスクリーンショットのようになります。さらに Notes, Known Issues, Resorces, Feedback というタブではそのプロパティについての注意点やドキュメントのリンク等を示してくれます。

そしてこの記事を書いている途中でデザインカンプから CSS を起こすときは Photoshop や Illustrator から CSS をコピーすることができるということを思い出したので次回はそのことについて書こうと思います。

それでは皆様楽しい CSS ライフを〜！

スポンサーリンク

---

スポンサーリンク

---