第45回 
CSS3をIEの独自拡張で再現する【その1】テーブルレイアウトを卒業しよう

CSS3をIEの独自拡張で再現する【その1】

最近どんどんCSS3を使ったWebサイトが増えてきています。

ですが、現在リリースされているInternet Explorer(8以下)でCSS3は使えません。

そこで、実はかなり前からIEに実装されている独自拡張機能をつかって、同じ見た目を再現する方法をご紹介します。

IEのみで使える、CSSとしては仕様外の手法です。validなCSSにこだわる場合は避けた方がよいでしょう。

border-radiusプロパティ(角丸)

border-radiusプロパティはCSSだけでボックスの角を丸くできるプロパティです。

参考:第9回 CSS3はここがすごい【プロパティ編1】

既に多くのWebサイトで使われており、たとえばtwitterの検索ボックスの角でborder-radiusプロパティが使われています。

Twitterで使われている角丸のボックス

これはFirefox3.6でのでキャプチャしました。IEでアクセスしたときは角丸にはならず、直角になります。

IEでも角を丸くしたい場合、いくつか方法がありますが、定番の手法としてはbackground-imageに角が丸く見える画像を配置する、というのがあります。この方法は簡単な反面、

などのデメリットがあります。

そこで、IEの独自拡張プロパティbehavior(ビヘイビア)を使う方法をご紹介します。

<div id="box">
かどまるにしたい。かどまるにしたい。かどまるにしたい。
</div>
#box {
border-radius: 1em; /* CSS3 */
behavior: url(border-radius.htc); /* for IE */
}

このbehaviorとは、JavaScriptなどで記述されたhtcファイル(HTML Component)をHTML上で実行できるIEの独自拡張機能です。角を丸くする処理をborder-radius.htcに記述しておき、それを behaviorで読み込んでいます。

このhtcはもちろん自作できますが、各所で公開されているので、DLしてくればすぐに使えます。

curved-corner(Google Code)

ただしこの方法も完璧ではありません。

などの制約・デメリットがあります。

opacityプロパティ(透過処理)

opacityプロパティは対象の要素を透過処理できるプロパティですがIEでは使えません。

参考:第10回 CSS3はここがすごい【プロパティ編2】

これは、IE独自のfilterプロパティで実現することができます。

<div id="box">
はんとうめいにしたい。はんとうめいにしたい。
</div>
#box {
background-color: #ccc;
opacity: .5; /* CSS3 */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
/* for IE6,7,8 */
}

単位が違うので数値の指定はopacityは0~1で、filterは0~100なので注意が必要です。

filterプロパティはそのほかにもブラーをかけたり、ドロップシャドウをかけたりいろいろできます。

また、filterプロパティはレンダリングを遅くする原因になります。

次回もさまざまな手法をご紹介します。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSS3をIEの独自拡張で再現する【その2】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読