CSS3.0 Maker - CSS3.0 Generator

AjaxianにおいてAuto-Generate CSS3 For Fame and Fortune!という記事が公開されている。CSS3のサンプルソースコードを出力するWebアプリケーションやWebサービスはすでにいくつもあり、マイコミジャーナルでもいくつか取り上げている。Ajaxianのさきほどの記事ではそうしたサービスの新しいもののひとつとしてCSS3.0 Makerを紹介している。CSS3.0 Makerは従来のほかの同様のサービスと比較して次のような特徴がある。

  • どのページも同じUIが使われている。左上が設定変更、中上がプレビュー、右上が生成されるCSSのサンプルとダウンロードリンク、中下が対応するブラウザ、右下が提案投稿フォームだ。UIに統一感があり扱いやすい。
  • 複数のブラウザに対応しているほか、それが現在どのブラウザに対応しているのかがアイコンでわかりやすく表示されている。

扱いやすいサービスで、WebデベロッパーやWebデザイナは一度使ってみたいサイトといえる。

CSS3.0 Maker

グラデーション操作例

トランスフォーム操作例

テキストシャドー操作例

ボックスシャドー操作例

フォントフェース操作例

CSS3.0 Makerで利用しているCSS3の機能は次のとおり。

  • 丸め角ボーダー
  • グラデーション
  • CSSトランスフォーム
  • CSSアニメーション
  • CSSトランジッション
  • テキストシャドー
  • ボックスシャドー
  • フォント回転
  • @Font Face

なお、現段階ではCSS3.0の機能の多くはベンダプレフィックスをつけた状態でのサポートになっている。こうした状態では、ベンダプレフィックスを指定したCSS指定を記載するほか、たとえどのブラウザもサポートしていないとしても、CSS3の規約で策定されることになるであろう正式な記述での指定も併用した方がよいと指摘されることがある。これは作成したスタイルシートがそのまま使われ続けた場合、CSS3が正式に普及してからそのまま利用できるようにするという意図がある。

CSS3.0 Makerが出力するサンプルにはベンタプレフィックスが付いたものしか提供されていないものもあるため、プログレッシグエンハンスメントのテクニックを使って現段階から対応させていく場合には、ベンダプレフィックスがつかない正式版の記述も考慮しておきたい。