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

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

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

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

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

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

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

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

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

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

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

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

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

CSS3 Gradient Generator

CSS3 Gradient Generator

http://gradients.glrzad.com/

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

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

Css3 drop shadow generator

Css3 drop shadow generator

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

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

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

CSS Border Radius Generator

CSS Border Radius Generator

http://border-radius.com/

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

CSS3 Rounded Corner Generator

CSS3 Rounded Corner Generator

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

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

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

Text Shadow Generator

Text Shadow Generator

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

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

Text Properties

Text Properties

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

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

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

Fun with Cross Browser CSS 3 Transform Generator

Fun with Cross Browser CSS 3 Transform Generator

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

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

Transforms

Transforms

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

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

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

CSS3 Multi Column Layout Generator

CSS3 Multi Column Layout Generator

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

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

Generateur de multi-colonnes en CSS3

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

CSS3 Button Generator

http://css3button.net/

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

Button Maker

Button Maker

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

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

CSS3 Button Generator

CSS3 Button Generator

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

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

CSS3 Button Generator

CSS3 Button Generator

http://css3buttongenerator.com/

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

CSS Generator

CSS Generator

http://www.cssbutton.me/

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

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

CSS3.0 Maker

CSS3.0 Maker

http://css3maker.com/

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

CSS3 Playground by Mike Plate

CSS3 Playground by Mike Plate

http://css3.mikeplate.com/

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

Layer Styles

Layer Styles

http://layerstyles.org/

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

CSS3 Generator – By Peter Funk & Eric Hoffman

CSS3 Generator - By Peter Funk & Eric Hoffman

http://www.css3.me/

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

CSS3 Generator

CSS3 Generator

http://css3generator.com/

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

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

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

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

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

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

CSS Text to Path Generator

CSS Text to Path Generator

http://csswarp.eleqtriq.com/

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

Layer Styles

Layer Styles

http://border-image.com/

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

Convert and share CSS colors

Convert and share CSS colors

http://css.coloratum.com/

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

3D Ribbon Generator

3D Ribbon Generator

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

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

CSSDesk

CSSDesk

http://cssdesk.com/

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

CSS Compressor

CSS Compressor

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

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

参考サイト

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事