改めて説明する必要はないかもしれませんが、CSSとは、「スタイルシート」とも呼ばれ、ウェブページのデザインを定義するための言語のことです。
別の表現をするなら、「デザインを指示する命令」ともいえるかもしれませんが、
この最新の形式がCSS3です。
CSS3の特徴を簡単に言えば、従来のCSSに新しい要素を追加しているだけです。
その為、従来の記述はそのまま使えますので、それほど違いは感じられないかもしれません。
しかし色々面白い仕様や便利な仕様が追加されていますので、「使う・使わない」に関係なく追加仕様は一応チェックされることをおススメします。
なお、CSS3はホームページ制作の最新形式であるHTML5とセットで言及されることが多いですが、これは単に両方とも最新形式ですのでセットで使うことが多いというだけです。
HTML5でなければCSS3は適用されないということではなく、HTML5以前の形式で使用してもちゃんと適用されますので、気にせず使っていきましょう。
CSS3で出来るようになったことは非常に多いです。
全てをご紹介することはとてもできませんので、特徴的なごく一部のものをご紹介します。
グラデーションは線形・円形・角度・方向・色数まで設定することができ、基本的なグラデーションは問題なく作ることができます。
また同時に背景画像や背景色を指定することもできます。
#grad{
background-image: -webkit-gradient(linear,lefttop,leftbottom,from(#333), to(#ccc));
background-image: -moz-linear-gradient(#333,#ccc);
background-image: linear-gradient(#333,#ccc);
}
ボックスシャドウはテキストの外側に影を作ることができ、X軸・Y軸・ぼかし具合・色を設定することができます。
また、カンマ(,)で区切ることによって複数の影を作れます。
#Shadow{
text-shadow:-40px-10px0#f00,40px10px10px#00f;
}
CSS3ではボックスモデルに対して角を丸くする設定ができるようになりました。
#radius{
border-radius:20px;
}
#radius4{
width:100px;
height:100px;
border-radius:50%;
}
CSS3ではtransformプロパティを使うことで要素の回転ができます。
#rotate{
background:url(bg3.jpg)no-repeat;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
CSS3ではtransformプロパティを使うことで要素の傾斜を設定することができます。
#skew{
background:url(bg3.jpg)no-repeat;
-webkit-transform: skewX(10deg);
-moz-transform: skewX(10deg);
ransform: skewX(10deg);
}