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

このページに掲載されている内容は、2010年に作成されたものです。

今回のテーマ：CSS3はここがすごい【プロパティ編1】

CSS3がどう変わるかについて2回に渡ってご紹介したいと思います。

DREAMWEAVER で CSS スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。

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系プロパティ