比較的最近のサイトでは使われる機会も多くなってきたものの、まだまだ仕様策定段階の状態が続いているCSS3。

仕様が確定していないとはいえ、CSS3にはweb制作現場からの切実な要望に答えるような、新しいプロパティが用意されています。

相変わらずシェアと実装具合の乖離が激しいIE君さえどーにか対応できれば、このCSS3っちゅーヤツを使わない手はないっ！

というワケで今回のエントリーでは、現状で使えるCSS3からの新プロパティの中から、とりあえずコレだけは押さえておこうぜってのを5つ、厳選してみました。

厳選ついでに、「爆発しろ」でお馴染みのIEシリーズでもCSS3に対応させられるスクリプトなども、ひっそりといくつかまとめてみましたので、こちらも合わせてチェックしてみなはれ♪

これだけは覚えておきたい5つのCSS3プロパティ

それでは以下から実例と共にご紹介していきますが、例によって例の如く、IE6～8で当ページの実例を見ても、無我の境地を悟るだけとなりますのでご了承下さいm(_ _)m

なお、実例は自由奔放かつテキトーの極みなので、そちらも合わせてご了承くださいな☆

text-shadow [テキストシャドウ]

「text-shadow」は、文字に影を落とすエフェクトのためのプロパティです。

一時期デザイナーの間で一世を風靡した（!?）、「太めで濃い色の文字に、1pxの明度が高い影を付ける」なんて技法も、これからはCSSだけで実現できちゃいます！

このプロパティ、実際に当ブログでもちょこちょこと使ってみていますが、ホントかなり使い勝手が良いので、なにはともあれCSS3っちゅーたらまずはコレをおすすめします♪

「text-shadow」プロパティの使い方

p#text {
	text-shadow:1px 2px 3px #f6c399;
	//値は左から"横方向への距離" "縦方向への距離" "ぼかしの距離" "色"
}

上記CSSの実例

彼女の愛は、クラウドでした。

box-shadow [ボックスシャドウ]

「box-shadow」は、枠に対して影を落とすエフェクト用プロパティです。

この技法は今まで「画像の背景」なんかでかなり多用されてきたモノなのですが、これもまたCSSだけで完結させるコトができるようになります。

書き方も上記「text-shadow」と同じような感じなので、合わせて一挙に覚えちゃいましょー！

p#text {
	box-shadow:1px 2px 3px #f6c399;//opera用（W3C勧告仕様）
	-moz-box-shadow:1px 2px 3px #f6c399;//firefox用
	-webkit-box-shadow:1px 2px 3px #f6c399;//Safari、Chrome用
	//値は左から"横方向への距離" "縦方向への距離" "ぼかしの距離" "色"
}

上記CSSの実例

「Don't be binaly（0か1で語るな）！」

gradient [グラデーション]

webデザインに作り込まれた印象を与え、雰囲気をギュッと引き締める効果のあるグラデーション。

ちょっと前にはXHTMLとCSS3だけで描いたドラえもんなんかで脚光を浴びてました。

まだoperaでは対応されてなかったり、対応ブラウザ同士でも書き方の互換性が無かったりと、あと一歩な実装環境ではありますが、グラデーション背景のためだけに画像を用意する手間やリソース消費がなくなるのは嬉しい限りですね。

結構細かな調節（何色も使う・斜めに変化する・円形グラデーションetc.）もできるのですが、ひとまずここではシンプルに「2色の線形グラデーション」の書き方をご紹介します。

「gradient」プロパティの使い方

p#text {
	background:-moz-linear-gradient(left top, #123456, #abc);//Firefox用
	//値は左から"開始地点" "始まりの色" "終わりの色"
	background:-webkit-gradient(linear, left top, left bottom, from(#123456), to(#abc));//Safari、Chrome用
	//値は左から"グラデーションの形" "開始地点" "終了地点" "始まりの色" "終わりの色"
}

上記CSSの実例

今月は月見バーガー貧乏。

border-radius [角丸]

需要という意味ではコレが一番大きいかもしれない、ボックスの角を丸くする、いわゆる「角丸」のプロパティです。

今まで”無意味な空div + 角丸用の背景画像”みたいな手法で、いわば強引に実装していた角丸ですが、CSS3導入後はちゃんとCSSだけで指定ができるようになります。

書き方的にはborder要素にかなり似ているので、覚えちゃえばすぐに使いこなせそうなプロパティですね。

p#text {
	border-radius:15px;//（W3C勧告仕様）
	-moz-border-radius:15px;//Firefox用
	-webkit-border-radius:15px;//Safari、Chrome用
	//普通のborder要素と同じく、各角ごとに個別の指定も可能。
	-moz-border-radius-topleft:30px;//Firefox用
	-webkit-border-top-left-radius:30px;//Safari、Chrome用
}

上記CSSの実例

→ 耳こねると「じーん！」感じとる猫耳 ←

rgba / opacity [透明度]

今までCSSでの色の指定は「#aadd39」のように、”RedGreenBlueの三原色×16進数”で表記していましたが、css3では「RedGreenBlueの三原色×256進数 + 透明度」という、いわゆるrgba形式での指定が出来るようになるようです。

ちなみに「rgba」と「opacity」は双方とも透明度を指定できるプロパティですが、前者が「指定した要素だけに透明度を反映させる」のに対し、後者は「指定した要素上にあるもの全てに透明度を反映させる」という違いがあります。

下記の実例ではそこんトコも加味した作りになってるので、cssと実際の表示を見比べてみてください。

span#aaa {
	background-color:#f66;
}

span#bbb {
	background-color:#f66;
	opacity: 0.5;
}

span#ccc {
	background-color:rgba(255,128,128,0.5);
}

span#ddd {
	background-color:#f66;
	opacity: 0;
}

上記CSSの実例

夏目ナナ　麻美ゆま　柚木ティナ　やまぐちりこ

対IE用スクリプトまとめ

それではタイトルにも書いた通り、以下に「IEでもCSS3を！」という思想の元に作成された、数々のスクリプトを簡易説明つきでご紹介します。

それぞれ重複する機能があり、複数の同時利用は内部でバッティングする可能性がありますので、複数同時利用はそこらへんお気をつけて。

CSS3 PIE.htc

恐らく現状では一番メジャーかつ広範に対応されているスクリプトです。

こちらを導入するコトで、CSS3に対応して無いIEでも「box-shadow / border-radius / rgba / gradient / border-image」などのプロパティが扱えるようになります。

個人的にはコレに「text-shadow」が使えるようになれば完璧じゃないかと思います。

現在も誠意改良中らしいので、今後に超期待ですね。

uuAltCSS.js

めちゃめちゃ多機能で、もしかしたらいずれjQueryに打って変わるんじゃないかとさえ思ってる国産JSライブラリ「uupaa.js」の派生系スクリプトです。

実際に使ってみたわけではないので分かりませんが、ブラウザ別対応表を見る限りだと上記「CSS3 PIE.htc」と同じ程度のコトは出来そうです。

ただし一部機能は”制限があるか、結果が多少異なります。”とのコトなので、理想の際はご注意＆実機確認をお忘れなく。

ie-css3.htc

「text-shadow / box-shadow / border-radius」の3点に絞ったスクリプトです。

上記プロパティをCSSにフツーに書いた後で、「behavior: url(ie-css3.htc);」という記述を加えれば良いだけなので、実装はかなり容易ですね。

用途がキチっと限られてるので、逆に言えばコレで済むならコレ一択でもいいんじゃないかと。

selectivizr

このスクリプトは今までのようなプロパティではなく、セレクタを対応させるためのスクリプトです。

しかもコレ単体ではなく、jQueryやmootoolsといったライブラリと同時利用するコトで効果を発揮するという、ちょっと変り種。

:nth-child や ::first-letter なんかが使えるようになるので、便利になる事は間違いないですね。

css3shadow.htc

テキストシャドウとボックスシャドウに特化した、国産のスクリプトです。

htmlのhead内にて当スクリプトを読み込むだけで、CSS側は特に何もしなくても良いのがポイント。

しかも、影の色にrgbaを使えるという隠れ機能も。

curved-corner.htc

ただただ角丸を実現させるためだけのスクリプトです。質実剛健、一直線。

画像を作る手間とコチラを導入する手間とを、比較した上で使うってコトになるかと思います。