【レポート】CSS Nite in Ginza, Vol.45

セッションは、主にCSS3で新たに登場したセレクタの紹介が中心でした。今回のセミナーの内容は、近日中に配布されるスライドを見ていただくのが一番わかりやすいと思うので、特に印象に残った項目を5つほどピックアップしたいと思います。

透明度の指定の仕方

• Opacityプロパティは要素まるごとに透明度が適用される
• color: hsla、color: rgbaの指定だと、文字だけ、枠線だけ、背景だけなどピンポイントに透明度が指定ができる

@font-faceでインストールさえていないフォントを表示できる

• @font-faceを使いフォントファイルを読み込ませ、それをfont-familyプロパティで使用できる
• 「Font Squirrel」というサイトに@font-faceで使えるフォントが紹介されている
• 絵文字フォントを使えば、ピクトグラムなども文字として表示させることができる
• 日本語のフォントの場合、ライセンスやダウンロード容量の問題があるので厳しい

背景画像のサイズを指定できる

• background-sizeプロパティで％やpxで背景画像のサイズを指定できる
• background-size: contain; で、画像の縦横比を保ったままボックスにピッタリ入るサイズにしてくれる
• background-size: cover; で、画像の縦横比を保ったままボックス全体を覆うサイズに拡大してくれる

グラデーションを指定できる

• backgrond-image: linear-gradient(開始位置 , 開始色 , 終端色);
• 上から0％、50％、50％、100％のポイント・・・というふうに色を細かいグラデーションの指定もできる
• 2010年3月現在、mozillaとwebkitでは記述の仕方が異なる
• 現状、グラデーションのレンダリングが重たい・・・

trasitionプロパティでアニメーションを指定できる

• 例えばマウスオーバーで色が変化する記述にtransition: backgrond-color 1s;などと指定することで色が1秒かけて変化するようになる

border-radiusくん（でしたっけ？）が、マウスオーバーでtrasitionしながら徐々に変化していくデモンストレーションは、サイコーでした。文書構造的にはアレですが、CSS3できることがズバッとわかって。

CSS3の最大のメリットは、パフォーマンスの向上でしょうか。いままで角丸四角形を実現するのに使っていた画像や、無駄なdiv要素などを排除できるという点ですね。劇的にファイルサイズが変わるわけではないと思いますが、HTTPリクエスト数が減る点も含め、ちりも積もれば的な改善になると思います。

ただやはり、実務でバリバリ使えるか？といわれると正直厳しいでしょうね。ただ、Progressive Enhancementという考え方で、文書構造や操作性を担保した状態で、モダンブラウザに対しCSS3を適用していくのは、アリだと思います。
実は私も、border-radiusプロパティは実務でバリバリ使っていたりします。IEで見ると真四角ですが、Firefoxでみると角丸四角形になっていたり・・・とか。しばらくは、そのような使われ方が現実的でしょうね。