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

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

後藤大地　 [2010/03/10]

印刷

CSS3, please! - This element will receive inline changes as you edit the CSS rules on the left. Enjoy!

CSS3の規約は現在策定段階にある。しかし、すでにどの主要ブラウザもCSS3に準拠する記述方法か、またはベンダプロパティとしてその機能を実装している。CSS3で提供される角丸め、影付け、グラデーション、透過、回転、Webフォント、スクリュー、スケール、トランジッションなどの機能は魅力的だ。浸透しつつあるプログレッシエンハンスメントのデザイン実装方法論を採用するなら、基本となるデザインをCSS2.1で整え、CSS3の機能で最新ブラウザ向けに一歩先のデザインを提供するというのは悪くない選択肢といえる。

ただし問題がある。CSS3は依然として策定段階にあるため、同様の機能は提供されているものの、それぞれブラウザごとに指定方法が異なっている。いずれCSS3で規程された方法で利用できるようになる見通しだが、現在のところはそうなっていない。同じ悩みを抱えているWebデベロッパやWebデザイナは少なくない。そうしたデベロッパのひとりであるPaul Irish氏とJonathan Neal氏が、同氏らの作業をCSS3 Please! The Cross-Browser CSS3 Rule Generatorとして公開した。

CSS3 Please! The Cross-Browser CSS3 Rule GeneratorはIE、Firefox、Chrome、Safari、Operaのそれぞれのバージョンに対してCSS3の設定をどのように書けいいのかとまとめたサイト。オンザフライで設置の有効無効を切り替え、レンダリング結果を確認できる。表示されているCSSがそのままCSS3のまとめになっており、右上の四角い部分がレンダリング結果になっている。

機能	IE	Firefox	Chrome	Safari	Opera
角丸め	9+	1+	OK	3+	10.5+
影付け	6+	3.5+	OK	3.0+	10.5+
グラデーション	6+	3.6+	OK	4+	-
透過	6+	3+	OK	3+	10.10+
回転	6+	3.5+	OK	3.1+	10.5+
Webフォント	6+	3.6+	OK	3+	10+


Chrome 5 - CSS3, please!閲覧例	Firefox 3.7 Alpha 2 - CSS3, please!閲覧例


Chrome 5 - CSS3, please!閲覧例	Firefox 3.7 Alpha 2 - CSS3, please!閲覧例


Chrome 5 - CSS3, please!閲覧例	Firefox 3.7 Alpha 2 - CSS3, please!閲覧例

どのブラウザのどのバージョンでどういった記述をすればいいのかが簡潔にまとまっていて参考になる。利用したい機能の設定をコピーしてくれば、あとは内容の調整とセレクタの部分を書き換えるといった作業で利用できる。スクリュー、スケール、トランジッションなどまだ追加していない設定も今後追加していくという説明がある。