ゼロからはじめるCSS3を勉強するために便利で参考になるCSS3ジェネレーターをまとめました

スマートフォンサイトなど、最近はでデザイン要素に画像をあまり使わずにCSS3を使う場面が増えて来ています。

とくにボタンやボックス背景などはCSS3でつくれば要素に合わせて可変してくれるので、非常に便利ですし、HTML上のムダな記述も減らすことができ、きれいで理想的なソースになります。

また、iPhone4をはじめとするRetinaディスプレイの場合はデバイスフォントやCSS3でコーディングすることで画像サイズの悩みも解決します。

デザイナーの方でもCSS3でデザインをどこまで再現できるのか、どのような部分にCSS3を利用したらよいのか知っておくとデザインの際に非常に役立ちますし、開発者の方もちょっとした管理画面やアプリの画面を作る際に便利かもしれません。

CSS3は従来のCSSよりもブラウザ別のベンダープレフィックスの記述等、やや複雑なので、全ての記述を暗記したりいちから書くのは少し手間です。

今回は、前回紹介したゼロからはじめるCSS3を勉強するために参考になるサイトや便利なツール、チュートリアルを一挙にまとめましたに続き、ゼロからはじめるCSS3を勉強するために参考になるジェネレーターを紹介します。

CSS3ジェネレーター関連の記事はたくさんあるので、その中でもこれはCSS3の記述の勉強や実用的によさそうというものを自分なりに集めてみました。

IE8までは非対応なので、ジェネレーターサイト自体も対応ブラウザからご覧下さい。

CSS3のプロパティ別のジェネレーター：グラデーション

Ultimate CSS Gradient Generator

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

はじめからいくつかのグラデーションも用意されていて、視覚的に細かいグラデーションの指定まで再現できるジェネレーターです。色の記述も選べて円形を含むグラデーションの方向・かたちも選べます。CSS3のグラデーションのジェネレーターというとこのサイトがよく上げられます。

CSS3 Gradient Generator

http://gradients.glrzad.com/

CSS3のグラデーションプロパティのジェネレーター。グラデーションの方向も斜めや縦にカスタマイズできます。

CSS3のプロパティ別のジェネレーター：ボックスシャドウ

Css3 drop shadow generator

http://www.wordpressthemeshock.com/css-drop-shadow/

「Shadow Style」から様々なドロップシャドウのスタイルや位置を選べて、紙が浮かんでいるようなシャドウも簡単に作ることができます。

CSS3のプロパティ別のジェネレーター：角丸

CSS Border Radius Generator

http://border-radius.com/

シンプルなジェネレーターで、一つ一つの角に数値を変えて角丸を設定できるのが便利です。

CSS3 Rounded Corner Generator

http://www.cssportal.com/css3-rounded-corner/

角丸をつける部分を全部の角か一つ一つの角か選べて、色やボーダーもつけられます。

CSS3のプロパティ別のジェネレーター：テキストシャドウ

Text Shadow Generator

http://css3gen.com/text-shadow/

シンプルにCSS3のテキストシャドウを実装できるジェネレーターです。ベンダープレフィックス用のコードはないようですが、シャドウの向きや距離をわかりやすく調整できます。

Text Properties

http://westciv.com/tools/text-properties/index.html

テキストを日本語でも自由に入力してtext-alignから太さ、シャドウまで確認できます。タイトルテキストなどテキストの形体も選択できて便利です。テキストシャドウはブラウザで確認してみるとデザインと印象が変わったりするので確認に使えます。

CSS3のプロパティ別のジェネレーター：トランジション

Fun with Cross Browser CSS 3 Transform Generator

http://codefuture.co.uk/css/css3-Transform.php

CSS3のトランジション用のジェネレーター。シンプルですが回転からゆがみまで生成でき、アニメーション時の記述に役立ちそうなジェネレーターです。

Transforms

http://westciv.com/tools/3Dtransforms/index.html

前回の記事でも紹介したジェネレーターですがCSS3のトランジションに特化してます。2Dと3Dが選べてアニメーション効果も付けられます。

CSS3のプロパティ別のジェネレーター：カラム

CSS3 Multi Column Layout Generator

http://www.aaronlumsden.com/multicol/

CSS3のカラムをスタイリングするcolumnプロパティのジェネレーターです。column-countを使いこなせばスタイルを整えるためのtableが必要なくなり、レスポンシブWebデザインにも使えそうですね。

Generateur de multi-colonnes en CSS3

http://debray.jerome.free.fr/index.php?outils/Generateur-de-multi-colonnes-en-css3
こちらもCSS3のcolumnプロパティのジェネレーター。ボーダーの細かい設定等ができます。

CSS3でつくるボタンのジェネレーター

CSS3 Button Generator

http://css3button.net/

CSS3のボタンに特化したジェネレーターです。ショーケースページでいろいろなユーザーが作成したボタンを見れるのもおもしろいですね。

Button Maker

http://css-tricks.com/examples/ButtonMaker/

こちらもCSS3のボタンに特化したジェネレーター。メモリを動かしたり色を選ぶだけで簡単に生成できます。

CSS3 Button Generator

http://www.cssportal.com/css3-button-generator/

こちらもボタンのジェネレーター。ホバー時の色も単色かグラデーションでそれぞれ生成＆確認できます。

CSS3 Button Generator

http://css3buttongenerator.com/

こちらも上のサイトと同様のホバージの色も生成＆確認できるシンプルなボタンジェネレーターです。

CSS Generator

http://www.cssbutton.me/

立体的なかちっとへこむボタンやCSS3で作ったタグクラウドなどのショーケースがあり、選択するとデモとソースを見ることができます。「CSS Generator」のページでは実際にホバーやアクティブ時を含むボタンを作成することができます。

CSS3のマルチプロパティのジェネレーター

CSS3.0 Maker

http://css3maker.com/

セレクトボックスから様々な機能を選ぶことができ、対応ブラウザも一目でわかります。

CSS3 Playground by Mike Plate

http://css3.mikeplate.com/

左のメニューから様々なCSS3プロパティを選択して編集ができます。テキストの内容も日本語で入力でき、カラムやトランジションにも対応していて確認する際に非常に便利です。

Layer Styles

http://layerstyles.org/

CSS3の効果はPhotoshopのレイヤースタイルに似ていると思っていましたがまさにそういったビジュアルのジェネレーターです。

CSS3 Generator – By Peter Funk & Eric Hoffman

http://www.css3.me/

視覚的なジェネレーターで、角丸、ボックスシャドウ、グラデーション、透過の設定ができます。

CSS3 Generator

http://css3generator.com/

様々なCSS3プロパティに対応しているジェネレーターでシンプルに数値をカスタマイズすることができます。

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

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

日本語のジェネレーターなので使いやすいのと、デモ部分に日本語のテキストを表示できるのが便利です。

その他のCSS3ジェネレーターや便利なツール

CSS Text to Path Generator

http://csswarp.eleqtriq.com/

CSS3でテキストにワープのような効果を付けられるジェネレーター。アニメーションやjsと組み合わせれば面白い効果が作れるかもしれません。

Layer Styles

http://border-image.com/

CSS3のボーダーに背景画像を付けることができるプロパティのジェネレーター。リンクで自分の好きな画像をボーダに設定できるのがよいですね。

Convert and share CSS colors

http://css.coloratum.com/

色の記述を入れると自動でrgb、省略型、hslの記述を生成してくれます。アルファを含めてrgbaの記述をした際などに非常に便利です。

3D Ribbon Generator

http://www.css3d.net/ribbon-generator/

CSS3でつくられた3Dのリボンの装飾を生成できるジェネレーター。HTMLとCSSの記述をみると多さに驚きましたが、自分で作るよりは便利かもしれません。

CSSDesk

http://cssdesk.com/

ジェネレーターではないですが、HTMLとCSSのソースをその場で編集して確認＆ダウンロードできます。CSS3の記述も反映されて便利です。

CSS Compressor

http://www.cssdrive.com/index.php/main/csscompressor/

こちらもジェネレーターではないですが、CSSのコードを圧縮してくれるサイト。CSS3の記述はベンダープレフィックス含めて長くなりがちだったりモバイル対応サイトの表示速度が遅くなったりするので、そういう時に便利かもしれません。

参考サイト

• 10 of the Best CSS3 Code Generators
• 35+ Useful Online CSS3 Generators & Tools