ゼロからはじめるCSS3を勉強するために便利で参考になるCSS3ジェネレーターをまとめました
- カテゴリー Web制作Tips
スマートフォンサイトなど、最近はでデザイン要素に画像をあまり使わずに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
CSS3のグラデーションプロパティのジェネレーター。グラデーションの方向も斜めや縦にカスタマイズできます。
CSS3のプロパティ別のジェネレーター:ボックスシャドウ
Css3 drop shadow generator
http://www.wordpressthemeshock.com/css-drop-shadow/
「Shadow Style」から様々なドロップシャドウのスタイルや位置を選べて、紙が浮かんでいるようなシャドウも簡単に作ることができます。
CSS3のプロパティ別のジェネレーター:角丸
CSS Border Radius Generator
シンプルなジェネレーターで、一つ一つの角に数値を変えて角丸を設定できるのが便利です。
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
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
立体的なかちっとへこむボタンやCSS3で作ったタグクラウドなどのショーケースがあり、選択するとデモとソースを見ることができます。「CSS Generator」のページでは実際にホバーやアクティブ時を含むボタンを作成することができます。
CSS3のマルチプロパティのジェネレーター
CSS3.0 Maker
セレクトボックスから様々な機能を選ぶことができ、対応ブラウザも一目でわかります。
CSS3 Playground by Mike Plate
左のメニューから様々なCSS3プロパティを選択して編集ができます。テキストの内容も日本語で入力でき、カラムやトランジションにも対応していて確認する際に非常に便利です。
Layer Styles
CSS3の効果はPhotoshopのレイヤースタイルに似ていると思っていましたがまさにそういったビジュアルのジェネレーターです。
CSS3 Generator – By Peter Funk & Eric Hoffman
視覚的なジェネレーターで、角丸、ボックスシャドウ、グラデーション、透過の設定ができます。
CSS3 Generator
様々なCSS3プロパティに対応しているジェネレーターでシンプルに数値をカスタマイズすることができます。
CSS3プロパティジェネレーター
http://css-eblog.com/eblog_sample/0912/css3-generator/
日本語のジェネレーターなので使いやすいのと、デモ部分に日本語のテキストを表示できるのが便利です。
その他のCSS3ジェネレーターや便利なツール
CSS Text to Path Generator
CSS3でテキストにワープのような効果を付けられるジェネレーター。アニメーションやjsと組み合わせれば面白い効果が作れるかもしれません。
Layer Styles
CSS3のボーダーに背景画像を付けることができるプロパティのジェネレーター。リンクで自分の好きな画像をボーダに設定できるのがよいですね。
Convert and share CSS colors
色の記述を入れると自動でrgb、省略型、hslの記述を生成してくれます。アルファを含めてrgbaの記述をした際などに非常に便利です。
3D Ribbon Generator
http://www.css3d.net/ribbon-generator/
CSS3でつくられた3Dのリボンの装飾を生成できるジェネレーター。HTMLとCSSの記述をみると多さに驚きましたが、自分で作るよりは便利かもしれません。
CSSDesk
ジェネレーターではないですが、HTMLとCSSのソースをその場で編集して確認&ダウンロードできます。CSS3の記述も反映されて便利です。
CSS Compressor
http://www.cssdrive.com/index.php/main/csscompressor/
こちらもジェネレーターではないですが、CSSのコードを圧縮してくれるサイト。CSS3の記述はベンダープレフィックス含めて長くなりがちだったりモバイル対応サイトの表示速度が遅くなったりするので、そういう時に便利かもしれません。
参考サイト
この記事を書いた人
著者 : ハヤシユタカ
2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら