虎子 from '戦国ランス'
謙信大好きっ娘。
なんとなく聴いてるショパン「ピアノ・ソナタ第2番 葬送」。
不思議とダークな気分になってくるから音楽は偉大だ。
それはさて置き、本日のお題。
「IE6でPNG画像を透過させる、かつ、Opera等で崩れないレイアウトを考える。」
ウチのHPにも一応サイト案内とゆー名目のメイン画面があるんだが、スタイルシートでIE専用の'フィルタ'を使う練習で作ったので、他ブラウザで表示するとナニが何だか...とゆー作りだった訳で。
今回、透過PNG画像を使って、どちらでも見えるよーに作り変えようと唐突に思い立つ。
ちなみにJavascriptを使う方法は除外。
なぜならJavascript OFFでもちゃんと見えるとゆー方がなんとなく好みだから。
PNG画像とは？とかはGoogleで調べてみると色々出てくるので詳細な説明は省く。
以下、メモ。
▼Photoshopで透過PNG画像を作る。
レイヤーの不透明度を適宜設定する or 境界をぼかして塗りつぶし、など下が透ける様な画像を作成し
「Web用に保存」→「設定：PNG-24」「透明部分：チェックON」で保存。
▼HTMLファイル＆スタイルシートの記述。
HTMLにこんな感じで記述。
<div id="mainpict">
<img src="./img/bg_main.png" alt="メイン画像" width="340" height="480" />
</div> divタグで表示範囲を作る。
imgタグに記述しているのが透過状態で作成したPNG画像。
スタイルシートはこんな感じ。
div#mainpict {
width: 340px;
height: 480px;
background: transparent url(../image/top7.jpg) no-repeat 50% 50%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./img/bg_main.png',sizingMethod=scale);
}
div#mainpict img {
display: none;
}
div#mainpict > img {
display: block;
} 表示範囲の'width'と'height'の指定は必須。
'background'でメインで表示したい絵を指定しておく。
ちなみに
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./img/bg_main.png',sizingMethod=scale); とゆーのはスタイルシートで設定できるIE専用のエフェクト処理の一つを使ってPNG画像を透過させちゃえッ！とゆーヤツ。
詳細は'MSDN'を参照。
当然、IE以外では無視されちゃうので注意。
んでIE6の場合はエフェクト処理が効いてPNG画像が表示されるので、HTMLに記述したimgタグは不要。
div#mainpict img {
display: none;
}で消しちゃう。
一方、IE6以外ではHTMLに記述したimgタグを表示させておく必要があるので
div#mainpict > img {
display: block;
}の様に子セレクタを入れた記述で表示するように仕込んでおく。
基本はこんな感じ。
後は応用～...で結果でゆーと、一応思ったよーなイメージで出来た。
新しいメインページ参照。
どうかなー？
ちゃんと画像とメニュー、透けてると思うんだが...