第9回 CSS3はここがすごい【プロパティ編1】テーブルレイアウトを卒業しよう
このページに掲載されている内容は、2010年に作成されたものです。
今回のテーマ:CSS3はここがすごい【プロパティ編1】
CSS3がどう変わるかについて2回に渡ってご紹介したいと思います。
2010年に勧告される予定のCSS3では、現行の2.1から非常に多くの点が変更されます。
まだ先の話…と思っている方。もう来年です!地デジより近いんです!すでに一部の新しいブラウザーでは先行実装が始まっています。
ということで、CSS3のどこがすごいのかをご紹介いたします。
プロパティがすごい
CSS3では、プロパティの種類がぐっと増えます。すなわち、指定できるスタイルの幅が広がるということですね。
たとえば、下記の例では、borderの各辺の色と角丸の半径のプロパティを使っています。-moz-というのは、Mozilla、つまりFirefoxのみに有効になるような指定です。
p {
width: 450px;
padding: 5px;
border: 7px solid #000;
/* 左は外側、右に行くほど内側の色 7pxなので7色指定する */
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
/* 角丸の半径 */
-moz-border-radius: 5px;
}
これをFirefox 3で見てみると…
こうなります。いままで画像を使わなければできなかった表現が、CSSだけでできるようになります。この他にも
- borderに画像を指定するborder-image
- 文字に影をつけるtext-shadow
- 色の透明度を指定するopacity
など、デザインの幅が大きく広がるプロパティが多数実装される予定です。では次回もお楽しみに。(こう)