株式会社K-fix

トップ＞スキル： Web ＞ IEのスタイルテクニック

Page
T
Pre
Next

IEでCSS3と同じような効果を付けることができます。これは、IE独自のプロパティである「filter」を利用します。
ただ、このスタイルを実現するに当たり、filterは幅を与えないと機能しないので、同時にwidthプロパティを指定する必要があります。

filterプロパティは、IE（Windows版）が独自に追加したプロパティで、いろいろな視覚効果を与えられます。IE5.5以上で使用できますが、書式は以下のようになります。

filter:progid:DXImageTransform.Microsoft.フィルタ名(値)

一般的に使われるフィルタ名には、以下のようなものがあります。

BasicImage()･････要素の回転・反転
invert()･････色（色相・明度・彩度）の反転
Alpha()･････透過表示
Glow()･････背後から光を当てた効果
Shadow()･････ぼかしのある影
Gradient()･････グラデーションの面を表示

また、ここではSafari、chrome（Webkit系）、Firefox（moz系）のプロパティも合わせて紹介しています。

transformプロパティ（要素を回転させる）

指定した要素を回転させるには、transformプロパティを使います。

☆ ポイント：回転はBasicImage()フィルタを使って、値の部分は「Rotation=数値」となり、0は回転無し、1は右へ90度、2は180度、3は270度のいずれかを指定。初期値は0です。

■ サンプルコードと結果

CSS

    	.rotate {
        		width:300px;
				-webkit-transform:rotate(-180deg);
				-moz-transform:rotate(-180deg);
				filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
				}

HTML

    	<p class="rotate">内容が回転します。</p>

box-shadowプロパティ（文字に影を付ける）

指定するボックス内の文字に影を付けるには、box-shadowプロパティを使います。

☆ ポイント：値には色（Color）と影の強さ（Strength）、影の方向（Direction）を指定します。影の色はカラーコードやカラーネームで指定、影の強さは影の伸びる距離を数値で指定（初期値は5）、影の方向は影の伸びる方向を0～360（初期値は270）、またはキーワードで指定します。

■ サンプルコードと結果

CSS

    	div.shadow p {
        		-webkit-box-shadow:2px 2px 3px #969696;
				-moz-box-shadow:2px 2px 3px #969696;
				filter:progid:DXImageTransform.Microsoft.Shadow(Color=#000099, Strength=3, Direction=135);
				width:350px;
				height:15px;
				border:5px solid #ccc;
				padding:10px;
				}

HTML

    	<div class="shadow">
    		<p>ボックス要素に影を付けます。</p>
        </div>

opacityプロパティ（要素の透明度を指定する）

指定した要素の背景色の透明度を付けるには、opacityプロパティを使います。背景画像があり、その上に段落要素に背景色を付けて、透明度を指定すると、また異なったデザインが表現できます。

☆ ポイント：safari、chrome、firefoxなどのモダンブラウザは、opacityプロパティを使いますが、IEのFilterプロパティでは、透明度はalphaフィルタを使う。また、値には0～100を使用する（初期値は100）。0は透明度が100％となり、文字まで消えます。

■ サンプルコードと結果

CSS

    	body {
        		background:url(inu.png) no-repeat;
				padding:30px;
				margin:0;
				}
        div.opacity {
				opacity:0.6;
				filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
				width:350px;
				height:20px;
				background-color:#ffffff;
				padding:5px;
				}

HTML

    	<body>
    	<div class="opacity">
        	<p>段落要素に透明度を指定します。</p>
        </div>
        </body>

gradientプロパティ（ボックスの背景にグラデーションを付ける）

ボックス要素内にグラデーションの背景色を付けるには、gradientプロパティを使います。それぞれのブラウザによって記述方法が異なります。

☆ ポイント：IEのfilterプロパティでは、Gradientフィルタを指定します。また、値には方向、開始色、終了色を指定します。方向（GradientType）は、0は縦に変化、1は横に変化します。開始色（StartColorStr）と終了色（EndColorStr）はカラーコードまたはカラーネームを指定します。

■ サンプルコードと結果

CSS

    	div.gradient {
        		background:-moz-linear-gradient(top,#ffff00,#228b22);
				background:-webkit-gradient
                		(linear,left top,left bottom,from(#ffff00),to(#228b22));
				filter:progid:DXImageTransform.Microsoft.Gradient
                		(GradientType=0,StartColorStr=#ffff00,EndColorStr=#228b22);
				width:300px;
				height:50px;
				padding:20px 10px;
				}

HTML

    	<div class="gradient">
    		<p>段落要素にグラデーションを付けます。</p>
        </div>

border-radiusプロパティ（角丸ボックスにする）

ボックス要素に角丸スタイルを適用するには、border-radiusプロパティを使います。CSS3の仕様ですので、CSS3をサポートしていないIE8以前のブラウザでは利用できません。でも、border-radius.htcファイルを指定することによって、CSS3をサポートされていないIEでも角丸ボックスが表示できます。

border-radius.htcは、Google Codeで配布されています。

http://code.google.com/p/curved-corner/

☆ ポイント：ダウンロードしたborder-radius.htcファイルをサイト内に保存して、スタイルの最後に「behavior: url(border-radius.htc)」と入力するだけです。この時、同時にボーダー太さ、線種、色を指定します。

■ サンプルコードと結果

CSS

    	h3 {
        		width:600px;
				height:30px;
				border:10px solid #336699;
				padding:10px;
				background-color:#ccffcc;
				-moz-border-radius: 32px;
				-webkit-border-radius: 32px;
				border-radius: 32px;
				behavior: url(border-radius.htc);
				}

HTML

    	<h3>角丸ボックスにする。</h3>

【CSSテクニック：IEスタイルテクニック編】

Page
T
Pre
Next
↑