簡単に実装できるCSS3プロパティ…しかもIEにも対応できる

以前、このブログでもWebフォントについて書いていましたが、色々なところでHTML5とCSS3についての記事を見かけることが多くなりました。

様々なリファレンスがありますが、とりあえずこのブログでは手っ取り早く簡単に使えるCSS3の機能を実際に使ってみました。

CSS3を利用して簡単にボックスを装飾

スタイルシートでの実装方法は…

/* ▼角丸を指定 */
border-radius: 8px;
-webkit-border-radius: 8px; /* Safari, Chrome対応 */
-moz-border-radius: 8px; /* Firefox対応 */
/* ▼ボックスシャドウ */
box-shadow: #666 0px 2px 4px;
-webkit-box-shadow: #666 0px 2px 4px; /* Safari, Chrome対応 */
-moz-box-shadow: #666 0px 2px 4px; /* Firefox対応 */
/* ▼背景グラデーション */
background: #FFFFFF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00AEEF), to(#5ED3F0)); /* Safari, Chrome対応 */
background: -moz-linear-gradient(#00AEEF, #5ED3F0); /* Firefox対応 */

FirefoxやApple Safari、Google Chromeにおいては上記の方法で実装可能ですが、今のところIE(Internet Explorer)ではCSS3非対応のため、このままでは上のボックスのような表現は不可能です。

これらのCSS3プロパティをIEに対応させるには？

基本的にIEではCSS3は非対応なのですが、colissさんでも紹介されているCSS3 PIEを使えば、たった一行のコードを追加するだけでIEをCSS3対応にさせることができます。※対応ヴァージョンはIE6/7/8のみ

» CSS3 PIE: CSS3 decorations for IE

CSS3 PIE適応前のスタイルシート

#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

CSS3 PIEを適応させるには…

#myElement {
...
behavior: url(PIE.htc);
}

CSS3 PIE適応前のスタイルシートの最後に、behaviorスクリプトとしてPIE.htcを指定します。
» PIE.htcのダウンロードはこちら

下記がCSS3 PIEがサポートしているCSS3プロパティで、現在他のプロパティへの対応も開発中らしいです。

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

今回はCSS3の中でも簡単なものから使ってみましたが、他にも実用的だと思ったものは、このブログや自分のサイトでも積極的・実験的に利用していきたいです。