SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

WebデベロッパやWebデザイナにとってCSS3で提供が予定されている各種機能(角丸め、影付け、グラデーション、透過、回転、Webフォント、スクリュー、スケール、トランジッション)は魅力的だ。これまでよりも美しいページを、これまでよりもスマートに実現できるようになる。CSS3を使ったページを制作するのは楽しい作業だが、すべてのブラウザに対応させるとなると骨が折れる。

• 今使えるCSS3の書き方まとめサイト

CSS3は策定段階にあるため、これら機能のほとんどはベンダプレフィックスがついた状態で提供されている。また、ブラウザに同機能を実装した時点での仕様の違いによって指定方法が変わっている部分もある。CSS3 Generators Write All that Pesky Code for Youにおいて各主要ブラウザに対応したCSS3を自動的に生成する5つのサービスが紹介されている。今使えるCSS3ジェネレータとして参考になる。紹介されているサービスは次のとおり。

1. CSS Border Radius

CSS Border Radiusの動作例 (Opera 10.52-6273)

丸カドのレンダリングを提供するCSS Border Radius。表示されるページの四隅にあるテキストフィールドに正の整数を入力すると、それに対応した丸みがつくようになる。レンダリングするためのCSS3は中央部分に随時更新される仕組み。

2. CSS3 Gradient Generator

ボタンを対象としてグラデーションをレンダリングするCSS3 Gradient Generator。図中央のボタンがレンダリングされた結果になっており、各種パラメータを調整することでオンザフライに描画を変更できる。ボタンの下にレンダリングするためのCSS3のコードが表示される。

CSS3 Gradient Generatorの動作例 (Firefox 3.6)

3. CSS3, Please!

CSS3の設定をどのように書けばいいのかをまとめたサイトCSS3, Please!。オンザフライで設置の有効無効を切り替え、レンダリング結果を確認できる。表示されているCSSがそのままCSS3のまとめになっており、右上の四角い部分がレンダリング結果になっている。

CSS3, Please!の動作例 (Opera 10.52-6273)	CSS3 Generatorの動作例 (Opera 10.52-6273)

4. CSS3 Generator

CSS3の設定をどのように書けばいいのかをまとめたサイトCSS3 Generator。CSS3, Please!が1枚表示なのと比べて、CSS3 Generatorは上部のコンボボックスで利用する機能を選択する仕組みになっている。オンザフライで設置の有効無効を切り替え、レンダリング結果を確認できる。

Westcivの動作例 (Opera 10.52-6273)

5. Westciv

CSS3の設定をどのように書けばいいのかをまとめたサイトWestciv。CSS3, Please!やCSS3 Generatorが1ページですべてまとまっているのと比べて、Westcivは機能ごとにページが別れ、それぞれにパラメータとレンダリング結果、CSS3のオンザフライ生成が実施される仕組みになっている。