第45回
CSS3をIEの独自拡張で再現する【その1】テーブルレイアウトを卒業しよう
CSS3をIEの独自拡張で再現する【その1】
最近どんどんCSS3を使ったWebサイトが増えてきています。
ですが、現在リリースされているInternet Explorer（8以下）でCSS3は使えません。
そこで、実はかなり前からIEに実装されている独自拡張機能をつかって、同じ見た目を再現する方法をご紹介します。
IEのみで使える、CSSとしては仕様外の手法です。validなCSSにこだわる場合は避けた方がよいでしょう。
border-radiusプロパティ（角丸）
- DreamweaverでCSSの使い方を習得
-
スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。
- Dreamweaver CS5 CSSデザイン手法
border-radiusプロパティはCSSだけでボックスの角を丸くできるプロパティです。
既に多くのWebサイトで使われており、たとえばtwitterの検索ボックスの角でborder-radiusプロパティが使われています。
これはFirefox3.6でのでキャプチャしました。IEでアクセスしたときは角丸にはならず、直角になります。
IEでも角を丸くしたい場合、いくつか方法がありますが、定番の手法としてはbackground-imageに角が丸く見える画像を配置する、というのがあります。この方法は簡単な反面、
- 余計なdivを増やさなくてはいけないケースがある
- 要素の幅を固定しなくてはいけないケースがある
- 画像を作るのがメンドクサイ
などのデメリットがあります。
そこで、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してくればすぐに使えます。
ただしこの方法も完璧ではありません。
- Webサーバーがhtcに対応した設定になっている必要がある
- 角丸の半径は1つのhtcで固定
- 縦のpaddingがIE以外のブラウザと異なる
などの制約・デメリットがあります。
opacityプロパティ（透過処理）
opacityプロパティは対象の要素を透過処理できるプロパティですがIEでは使えません。
これは、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プロパティはレンダリングを遅くする原因になります。
次回もさまざまな手法をご紹介します。
では次回もお楽しみに。（こう
）
お問い合わせ
メルマガ