これはいい！HTML5とCSS3の便利なツールがまるっと揃っている -Web Directions

HTML5のvideoやaudioやcanvas、CSS3のテキストやボックス、グラデーション、アニメーションなど、ウェブ制作に役立つ便利なツールが数多く揃っているWeb Directionsを紹介します。

シンプルなインターフェイスながら高機能なので、他のツールを利用していた人も一度、使ってみてください。気に入ると思います。

Web Directions

HTML5, CSS3の各ツールは、プレビューを見ながらコードを生成するだけでなく、対応ブラウザの一覧も表示されるのは嬉しいですね。

コード、対応ブラウザの表示

ツールは、HTML5が4種類、CSS3が7種類、デザインが2種類、どれも便利ですが、その中からいくつかキャプチャで紹介します。

HTML5: video
HTML5のvideoやaudio要素の各属性をプレビューを見ながら設定できます（上はvideo）。

HTML5: Canvas
Canvasの各属性ををクリックで加え、値をいれるだけで、Canvasを使って自由に描くことができます。

CSS3: text
テキスト周りのさまざまなプロパティを設定できます。

CSS3: box
ボックス関連のさまざまなプロパティを設定できます。

CSS3: Gradients
線状と放射線状の2種類のグラデーションを簡単に設定できます。

CSS3: 2D Transforms
2Dの拡大・縮小、移動、回転、傾斜の変形（アニメーション付き）を簡単に設定できます。

CSS3: 3D Transforms
3Dの拡大・縮小、移動、回転、傾斜の変形と遠近効果を簡単に設定できます。

CSS3: Animations
さまざまなCSS3アニメーションを簡単に設定できます。