POINT3：CSS 3で追加されたプロパティ－すぐに使えるCSSデザインテクニック第2回

2010.3.29 MON

POINT3

CSS 3で追加されたプロパティ

CSS 3では、セレクタだけでなく複数のプロパティも追加されている。POINT 1で述べたようにCSS 3ではモジュールベースで策定が進められており勧告への状況はモジュールごとに異なるが「CSS 3 Backgrounds ＆ Borders Module Level 3」や「CSS Multi-column Layout Module」など一部のモジュールはCSS 2.1と同じ勧告候補にいたっている。

たとえば、CSS 3を利用すると画像を使わずにグラデーションを簡単に表現できる【1】。CSS 3のGradientsは、現在Editor's Draft（草案）の状態で仕様が固まっていない【2】が、backgroundプロパティでlinear-gradientを指定すればグラデーションを指定できる【3】。ただし、このGradientsは前述したとおりEditor's Draftのため各ブラウザはプリフィクスを利用して先行実装を行っている（2010年2月時点）。プリフィクスは各ブラウザの独自実装を定義するCSSだ。IEならプロパティや値の冒頭に「-ms-」と定義する。SafariやGoogle Chromeなどのwebkit系のブラウザなら「-webkit-」、Firefoxなら「-moz-」を冒頭につけることで独自のCSSを利用できる。Firefoxならlinear-gradientの冒頭に「-moz-」をつければグラデーションの利用が可能になる【4】。webkit系のブラウザでもプリフィクスを利用してグラデーションを表現することができるが、W3Cの文法と異なる点に注意が必要だ【5】。これはもともとwebkit系のブラウザで利用される文法が途中で変更された経緯があるからだ。CSS 3が「最終草案」もしくは「勧告候補」にいたった段階で統一されるはずだが、現時点では文法が異なっているので注意してほしい。

p106-03-01
【1】 CSS 3では、簡単にグラデーションを取り入れられる

p106-03-02
【2】「CSS Image Values Module」（dev.w3.org/csswg/css3-images/#gradients-）では、CSS 3のGradientsがEditor's Draft（草案）の状態になっていることがわかる

p106-03-03
【3】 backgroundに対してlinear-gradientを指定することでグラデーションを表現できる

p106-03-04
【4】 Firefoxではプリフィックス「-moz-」を利用してグラデーションを指定しよう

p106-03-05
【5】 webkit系のブラウザでは文法がCSS 3とは異なる

CSS 3ではドロップシャドウも簡単に利用できる【6】。box-shadowプロパティにプリフィクスをつけるだけで各ブラウザでドロップシャドウを表現でき、box-shadowプロパティでは「横幅」、「縦幅」、「ぼかし具合」、「色」の順で指定すればドロップシャドウの形状を指定できる【7】。しかし、box-shadowはCSS Backgrounds and Borders Module内で策定が進められたが、勧告にいたるにあたり同モジュールからの削除が予定されている。ほかのモジュールもしくは次のバージョンのCSSで策定が進められる予定になっているので注意しよう。

p106-03-06
【6】 CSS 3では、簡単に上図のようなドロップシャドウを表示できる

p106-03-07
【7】 box-shadowプロパティにプリフィクスをつけるだけで、各ブラウザでドロップシャドウの表現が可能になる

また、角丸を表現するborder-radiusも追加されている【8】。グラデーションと組み合わせることで画像を使わずにクオリティの高いボタンを作成できる【9】。どの角を角丸にするかなど、細かく指定できるのでサイトのイメージに合わせて微調整を行える【10】【11】。border-radiusが定義されているCSS Backgrounds and Borders Moduleもすでに勧告候補にいたっているため、これから仕様が大きく変わることはないだろう。

p106-03-08
【8】 border-radiusプロパティを利用すれば角丸ボタンを表現できる