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

 

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

WebデベロッパやWebデザイナにとってCSS3で提供が予定されている各種機能(角丸め、影付け、グラデーション、透過、回転、Webフォント、スクリュー、スケール、トランジッション)は魅力的だ。これまでよりも美しいページを、これまでよりもスマートに実現できるようになる。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のオンザフライ生成が実施される仕組みになっている。



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

“大食い女王”もえあず、ジャイアント白田も驚く食べっぷり!驚異の新人も登場
[05:00 10/2] エンタメ
後藤真希、本格声優に初挑戦! アニメ版『モンハン』にゲスト出演決定
[05:00 10/2] ホビー
米国発3DCGアニメ『RWBY VOLUME2』、初日舞台挨拶に早見・日笠・嶋村が登壇
[03:04 10/2] ホビー
『ろんぐらいだぁす!』、先行試写会開催! キャストが語る注目ポイントは?
[02:47 10/2] ホビー
花澤香菜、ハロウィンスペシャルライブ開催! 新曲「ざらざら」初披露
[02:21 10/2] ホビー

求人情報