2009年05月27日

CSS3はここがすごい【プロパティ編1】:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ: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だけでできるようになります。この他にも
  • borderに画像を指定するborder-image
  • 文字に影をつけるtext-shadow
  • 色の透明度を指定するopacity
など、デザインの幅が大きく広がるプロパティが多数実装される予定です。

次回はCSS3のセレクタについてご紹介します。

では次回もお楽しみに。

6/3 第2回書きました。
CSS3はここがすごい【2】

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 12:15
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック