Web制作の現場で使えるjQuery　UIデザイン入門 ― 第18回

IE6対応！jQueryで透過PNGのロールオーバーを作る (2/3)

IE6で透過PNGを表示する

　さて、ここからが今回の本題です。サンプル01をIE6でも正しく表示できるようにします。IE6ではCSSの独自拡張（filterプロパティ）を使って透過PNG画像を背景として表示できます（関連記事）。jQueryのスクリプトを書く前に、IE6で単純に透過PNGを表示するHTMLとCSSを作成します。

　ナビゲーションメニューのHTMLはサンプル01と同様にul/li要素で記述します。IE6では透過PNGをimg要素に直接指定しても表示できませんので、代わりにダミー画像（1px×1pxの透過GIF画像＝「transparent.gif」）を用意してsrc属性に指定します。img要素にはCSSを設定するため、「jquery」「javascript」などのメニューの項目名に対応したclass属性を付けておきます。

▼サンプル02（HTML部分）

<ul>
    <li><a href="#"><img src="images/transparent.gif" alt="jQuery" class="jquery" /></a></li>
    <li><a href="#"><img src="images/transparent.gif" alt="javascript" class="javascript" /></a></li>
    <li><a href="#"><img src="images/transparent.gif" alt="CSS" class="css" /></a></li>
    <li><a href="#"><img src="images/transparent.gif" alt="HTML" class="html" /></a></li>
</ul>

　CSSはIE6にのみスタイルを適用させるため、セレクターの頭に「* html」を付ける「スターハック」（CSSハックの一種）を使って記述しています（関連記事）。先ほど付けておいたclassごとにfilterプロパティを設定して、透過PNG画像をimg要素の背景として表示しています。filterプロパティの詳しい使い方はコラムで解説していますので参照してください。

▼サンプル02（CSS部分）

ul{
    padding: 10px;
    margin:0;
}
ul li{
    width:140px;
    height:40px;
    list-style-type:none;
    float:left;
}
ul li img{
    width:140px;
    height:40px;
    border:none;
}
* html img.jquery{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/jquery.png',sizingMethod='scale')
}
* html img.javascript{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/javascript.png',sizingMethod='scale')
}
* html img.css{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/css.png',sizingMethod='scale')
}
* html img.html{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/html.png',sizingMethod='scale')
}

実行結果。透過PNGをIE6で表示している

　以上でIE6で透過PNG画像を表示できました。次ページでは、サンプル01とサンプル02を組み合わせて、クロスブラウザーで表示できる透過PNG対応のロールオーバーに仕上げていきます。

【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を指定しても有効になりません。