CSS3の制作をぐっと楽にする厳選20のオンラインツール
Post on:2012年7月11日
CSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-13.png)
Animate.css
classを付与するだけで、さまざまなCSS3アニメーションが実装できます。
初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利用できるということで。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-04.png)
animatable
簡単に実装できる39のCSSアニメーションのデモ。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-01.png)
Stylie
トゥイーンやキーフレームを使ったアニメーションを動作確認しながら作成できます。
[ad#ad-2]
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-03.png)
Cubic-bezier
cubic-bezier()の3次ベジェ曲線を使ったイージングのアニメーションを生成します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-02.png)
GradientFinder
Photoshopなどで作成した画像からCSS3グラデーションのコードを生成します。
カラーパレットからも作成可能。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-18.png)
Westciv Tools
グラデーション・テキスト・ボックス・アニメーションなど、さまざまなCSS3のスタイルを生成できます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-07.png)
Layer Styles
PhotoshopのようなUIでシャドウやボーダーや角丸を生成します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-09.png)
CSS Text Shadow
テキストシャドウを使ったスタイルを確認しながら生成します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-11.png)
CSS Arrow Please
パネルにアローをつけます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-17.png)
CSS Button Generator.com
美しいCSSのボタンを作成できます。
[ad#ad-2]
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-12.png)
Gridinator
fixed, fluid, elasticレイアウトのグリッドが設計できます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-19.png)
GridPak
レスポンシブデザイン用のグリッドを設計できます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-20.png)
responsify
カラム数、溝、ブレイクポイントを決めて、レスポンシブ用のグリッドを生成。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-10.png)
Patternify
ピクセルペースのパターンを生成できます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-08.png)
CSS3 Patterns Gallery
画像を使用せず、CSS3で作ったパターンのギャラリー。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-14.png)
CSS3 Click Chart
CSS3のプロパティを実例とともにお勉強。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-06.png)
CSS3 structural pseudo-class selector tester
CSS3のセレクタの動作をチェックします。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-05.png)
prefixMyCSS
スタイルシートの必要な箇所をベンダプレフィックス付きのものにします。
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-15.png)
CSS3 Test
使用しているブラウザのCSS3の対応状況をチェック。
※Chromeで表示
![サイトのキャプチャ](/wp-content/uploads-2012/2012071102-16.png)
Cssizer.com
オンラインでCSS+HTMLを編集・表示確認ができます。
sponsors