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

Web制作テクニック

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

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

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

CSS3の角丸、ボックスシャドウ・グラデーションプロパティを使ったボックスデザイン。CSS3非対応ブラウザ(IEなど)で見ると、ただの四角い枠にしか見えません。

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

[css] /* ▼角丸を指定 */
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対応 */
[/css]

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

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

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

CSS3 PIE
» CSS3 PIE: CSS3 decorations for IE

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

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

CSS3 PIEを適応させるには…

[css] #myElement {

behavior: url(PIE.htc);
}[/css]

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

この記事を書いた人

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です