以前、[IE6でpng24を使う]で「blogの背景で使おうとしましたが・・・」とのコメントがあったので、違う方法も紹介します。実は自分が使おうとしただけなんですが。。。
今月号(2008年9月)のWeb Designingでも特集を組んでいますが、最近透過pngがきてるらしい。確かに透過pngがすんなり使えればデザインの幅も広がるのではないかと思います。しかしネックはIE6です。。。
今回の方法はInternet Explorer 5.5から追加されたDirectX機能の アルファイメージローダーを使用した方法です 。
ソースを見てみると、
HTML
[html]
<div id="contents-center">
<div id="contents-top">
<div id="contents-bottom">
<p>Sample<br />
Sample<br />
・
・
・
Sample</p>
</div>
</div>
</div>
[/html]
CSS
[css]
#contents-top{
width: 916px;
background: url(images/contents-outer_01.gif) left top no-repeat;
}
#contents-bottom{
width: 916px;
background: url(images/contents-outer_03.gif) left bottom no-repeat;
}
#contents-center{
background: url(images/contents-outer_02.png) left top repeat-y;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( SizingMethod=scale, Src="images/contents-outer_02.png"); /*←ここが重要*/
width: 916px;
margin: 13px 0 18px;
}
[/css]
※サンプルデータをご利用の際に発生した障害やデータ破損などについては、当サイトは一切の責任を負いません。
これでできるはずですが、もし上と下の画像も透過pngにする場合はHTMLとCSSを修正する必要があります。当然透けてしまうんで入れ子にしないで上から順に記述してください。
HTML
[html]
<div id="contents-top"></div>
<div id="contents-center">
<p>Sample<br />
Sample</p>
</div>
<div id="contents-bottom"></div>
[/html]
CSSでは#contents-topと#contents-bottomは空のdivタグなんで高さを指定する。
今、確認してみたら前回もアルファイメージローダー使ってました。。。
今回は「CSS-EBLOGの透過PNGを使ったレイアウト」を参考にさせて頂きました。ありがとうござました。