【CSSワンポイントレッスン 】

透過PNGをWeb制作にもっと利用する

　ツールチップではp要素の背景として(関連記事)、今回のロールオーバーではimg要素として、IE6で透過PNGを表示しました。ここではIE6の透過PNG対応について、もう少し詳しく紹介しましょう。

　透過PNGを表示するCSSのfilterプロパティは以下のような記述でした。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tooltip.png',sizingMethod='scale');

　IEの独自機能であるfilterプロパティに、「AlphaImageLoader」を指定して透過PNGを読み込んでいます。かなり長い記述ですが、この1行はお約束として覚えてしまいましょう。AlphaImageLoader (src='・・・',sizingMethod='・・・')内のsrcには画像のパスを、sizingMethodには以下のような画像の表示方法を指定します。

• scale（透過PNGのサイズを要素のサイズに合わせる）
• image（要素のサイズを透過PNGのサイズに合わせる）
• crop （サイズを変化させずに要素に透過PNGを表示する）

　実際にどのように画像が表示されるか、簡単なサンプルで確認してみましょう。たとえば、100px×50pxの透過PNGを、200px×100pxの要素に配置した場合、次のようになります。上からCSSのbackgroundプロパティ、AlphaImageLoaderのscale、image、cropです。

IE6で透過PNGを表示したサンプル。上からCSSのbackgroundプロパティ、AlphaImageLoaderのscale、image、crop

▼サンプル04（HTML部分）

<p>background</p>
<div id="sample1"></div>
<p>scale</p>
<div id="sample2"></div>
<p>image</p>
<div id="sample3"></div>
<p>crop</p>
<div id="sample4"></div>

▼サンプル04（CSS部分）

div{
    width:200px;
    height:100px;
    border:1px solid red;
}
#sample1{
    background:url("images/alpha.png")
}
#sample2{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/alpha.png',sizingMethod='scale')
}
#sample3{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/alpha.png',sizingMethod='image')
}
#sample4{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/alpha.png',sizingMethod='crop')
}

　CSSのbackgroundプロパティとは挙動が大きく異なるため、通常はHTMLの要素のサイズ指定とPNG画像のサイズを同じにしておき、「scale」か「crop」を選ぶのがよいでしょう。CSSのbackground-imageプロパティのように、background-repat（繰り返し）やbackground-position（表示位置）は指定できないので、表示位置を考慮した1枚絵の画像を用意する必要があります。

　このほかにもAlphaImageLoaderを利用する際にはいくつか細かい注意点があります。1つはパスの指定方法です。CSSのbackgroundプロパティでurlを指定する際はCSSファイルからの相対パス、もしくは絶対パスで記述しますが、AlphaImageLoaderのsrcの中のファイルパスは読み込まれたHTMLファイルからの相対パス、もしくは絶対パスで記述します。

　また、背景にAlphaImageLoaderを設定した要素は、その子要素・孫要素のa要素のリンクや、clickイベント、mouseoverイベント、input要素のフォーカスが効かなくなってしまいます。その場合は、子要素や孫要素のpostionプロパティにrelativeを設定すれば、a要素のリンクやフォーカスなどが有効になります^(*)。

　このように一癖あるIE6での透過PNG利用ですが、うまく使いこなせるようになれば、他の画像フォーマットでは難しい、さまざまなデザイン表現ができるようになります。ぜひ覚えておきましょう。

　*ただし、AlphaImageLoaderを設定した要素のpositionプロパティがrelativeまたはabsoluteの場合は、その子要素にrelativeを指定しても有効になりません。