PR

IE8以前でCSS3の表現を使うには

2011年6月20日(月)
宮本 麻矢(著)山田 祥寛(監修)

IEでCSS3のlinear-gradient関数を再現

CSS3のlinear-gradient関数のようなグラデーション表現も、IEの独自拡張であるfilterプロパティのGradient()で再現できます。これは、要素の背景にグラデーションの色を指定するフィルタで、属性としては、以下表のようなものを指定できます。

表3:Gradientフィルタの属性と値

属性 意味
GradientType グラデーションの種類 0は縦のグラデーション、1は横のグラデーション
StartColorStr #aaRRGGBB グラデーション開始の透明度(aa)と色(RRGGBB)を指定、初期値は#ff000000
EndColorStr #AARRGGBB グラデーション終了の透明度(aa)と色(RRGGBB)を指定、初期値は#ff000000

以下のように利用します。

[リスト06]filterプロパティのGradient()でグラデーションを表現

  #sample3 {
  background: transparent; /* 背景をリセット */
  -ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffff',EndColorStr='#cc0000');
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffff',EndColorStr='#cc0000');
  }

3

図3:(左)FireFox:linear-gradient関数を使った例。(右)IE:filterプロパティのGradient()を使った例。

このように、filterプロパティのGradient()を使えば、CSS3のlinear-gradient関数とほぼ同じようなグラデーション表現が可能になります。

IEでCSS3のopacityを再現

前回は紹介できませんでしたが、CSS3にはopacityといって要素に透明度を指定できるプロパティがあります。これもIEでは対応していませんが、要素を透過させるfilterプロパティのAlpha()で似たような表現ができます。値として「Opacity=開始透明度」を指定するだけです。Opacityの値範囲は0~100(0が透明、100が不透明)で、初期値は0です。

[リスト07]filterプロパティのAlpha()で透過表現

  #sample4 {
  background: transparent; /* 背景をリセット */
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  }

3

図4:(左)FireFox:opacityを使った例。(右)IE:filterプロパティのAlpha()を使った例。

さて、ここまではfilterプロパティを使用してCSS3の表現を再現してきましたが、やはりこれには限界があります。例えばIEの対応していないCSS3セレクタや、角丸の表現などを使うには、次に紹介するjQueryを利用するのがお勧めです。

Think IT会員限定特典
  • 「IE8以前でCSS3の表現を使うには」サンプルプログラム

著者
宮本 麻矢(著)山田 祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています