第9回 CSS3はここがすごい【プロパティ編1】テーブルレイアウトを卒業しよう

今回のテーマ: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で見てみると…

CSS3のborder系プロパティ

こうなります。いままで画像を使わなければできなかった表現が、CSSだけでできるようになります。この他にも

など、デザインの幅が大きく広がるプロパティが多数実装される予定です。では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSS3はここがすごい【プロパティ編2】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読