[CSS]CSS3の効果的な使い方と陥りやすいワナ
Post on:2010年3月4日
sponsors
CSS3で何ができるのかという「CSS3で何ができるの？ という時にみておきたいサイト集」という記事をとりあげました。
今回は、そのCSS3を実際どのように使うのか？ ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。
CSS3 Examples and Best Practices
下記は各ポイントを意訳したものです。
はじめに
CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。
しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。
だからといって、CSS3を使うべきではないことを意味するものではありません。ではCSS3の新しい機能をどのように使用するべきでしょうか？ ここにあげた優れたいくつかの例をみてください。
テキストのエンボス効果
グリーンの円はCSS3対応で、テキストに1pxのシャドウを適用して、さりげなくエンボス効果をつけています。
レッドの円は非対応ブラウザのものです。
繊細な角丸とシャドウ
グリーンの円はCSS3対応ブラウザで、ボックスに角丸とシャドウを適用しています。
レッドの円は非対応ブラウザのものです。
アニメーションで回転するDVD
グリーンの円はCSS3対応ブラウザで、DVDがアニメーションで回転しながら飛び出してきます。
Firefoxではパッと飛び出すだけで、非対応ブラウザではスタティックなイメージが表示されます。
半透明のバー
このエフェクトを見るためには少しスクロールさせてください。上部の検索バーと重なったコンテンツが半透明で表示されます。
角丸
CSS3のborder-radiusに対応したブラウザでは、レッドの円の箇所には角丸が適用されます。
微妙なテキストのシャドウ
グリーンの円はCSS3対応ブラウザで、ほんのわずかにシャドウを適用しています。
陥りやすいワナと対処方法
No：画像の回転
画像にボーダーを適用している場合、画像の回転は注意深くしてください。下記のように汚くみえることがあります。
Yes：画像は回転させておく
上記の汚くみえるのを避けるために、あらかじめPhotoshopで画像を回転させたものを作成し、それを使用します。
Yes：一つの大きい画像を回転させる
CSS3に対応したwebkit系のブラウザでみてください。地球がアニメーションでゆっくり回転しています。
No：多くの大きい画像を回転させる
回転している画像が多いと、気持ちがわるくなるかもしれません。
No：CSS3に頼る
下記のサイトをCSS3対応ブラウザで見るととても素晴らしく見えます。しかしながら、非対応ブラウザでみると崩れてしまいます。CSS3やHTML5でレイアウトをする際は、非対応ブラウザも考慮にいれて、非常に注意深くおこなってください。
Yes：カスタムフォントには代替を
カスタムフォントを使用する際は、多くの人がインストールしているであろう似た他のフォントを包含して指定するのを忘れないでください。下記のサイトではカスタムフォントを使用していますが、代替フォントも似たようなものを指定しています。
sponsors
