今使える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年後は? あなたの年収をデータに基づき予報します。

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

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

人気記事

一覧

イチオシ記事

新着記事

柴田英嗣、元妻&ファンキー加藤娘の健診に立会い宣言 "加藤違い"で狩野焦る
[00:12 7/30] エンタメ
ウレタン製の柔らかVRゴーグル「Merge VR」、ツクモ限定で30日から販売開始!
[00:00 7/30] パソコン
[シン・ゴジラ]日本政府対ゴジラの攻防 日本映画のスケールを超えた壮大で緻密な作品
[23:59 7/29] エンタメ
「機械仕掛けの愛」4巻発売、娘の結婚式に参列するAIのエピソード公開
[23:34 7/29] ホビー
声優・久保ユリカ、2ndシングル「SUMMER CHANCE!!」発売記念特番でMVを公開
[23:30 7/29] ホビー

求人情報