はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。

デザイン通りに組む！　～透過PNG～

ケンジ
ふー！
ここまで来たか。残るはラスボス最終形態、巨大ネコ画像透過のみだね！！
図：今回の作業箇所
トモ・リーン
そうね。
ケンジ
FireworksでPNG32、PhotoshopでPNG-24+透明にチェックを入れて作ったPNGがIE6で透過されない時の対処法だよね！
書き出し窓の画像
トモ・リーン
これはIE独自の機能、「filter」を使うと大丈夫よ。
filterはいろいろなことが出来るけど、今回は透過PNG用の対処に使うだけだからその辺りの説明をするわね。
filterについて

IE独自の機能です。
filterは沢山機能がありますが、今回は透過PNGの対処に使える部分だけ紹介します。
filterの他の機能が気になる方はこちら（TAG indexさんのページに詳しくあります）

.sample {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='PNGを貼りたいhtmlからのパス');
}

「PNGを貼りたいhtmlからのパス」の部分を書き換えてください。基本はこれでOK!!

ケンジ
・・・このままだと、確かにIE6でも透過されているけど今度はIE以外のブラウザで見えないよね。
filterってIE独自の規格だし、当たり前の挙動なんだけど。
トモ・リーン
そうよ。
実際には他のブラウザ用に普通の背景指定法と一緒に書くのよ。
具体的にはこんな感じね。
.sample {
/*他のブラウザ用*/
background-image: url(CSSファイルからのパス);
background-repeat: no-repeat;
/*IE6用*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='PNGを貼りたいhtmlからのパス');
/*他のブラウザ用の背景を消す*/
_background-image:none;
}
ケンジ
ふむふむ、書いてみるね！！
組んでみたファイル【HTML】 組んでみたファイル【CSS】
トモ・リーン
うんうん。
出来てるわね！
ケンジ
これからバンバン透過PNG使いまくるぞ〜〜！！
がはは！！！
トモ・リーン
う〜〜ん、実は透過PNGにはいっぱい罠があるのよ！
ケンジ
ええ〜〜〜〜っ？
トモ・リーン
詳しくは私のお友達の佐藤さんが何かのイベントで、まとめスライドを作ったらしいからそれを見てやって。
9/27のRe:Creator's Kansai（リクリ）さんのイベント、Re:Creator's Chat 1stでのスライドです。
そのうちブログにもupされるそうですが、待ちきれないのでこっちでupです。
2010年末版→PNGまとめスライドを表示(PDF 11MB) 便利なJavaScriptライブラリの紹介を追加しています。(2011/01/27 追記)
2008年版→PNGまとめスライドを表示(PDF ４MB)
トモ・リーン
このPDFの30ページ罠その４だけど、この方法じゃなくてリンクがおかしくなったaに対してposition:relative;を使うと回避出来るらしいわよ。
佐藤さんがイベントでの発表後、近所にいたCSS将軍に教えてもらったネタらしいわ。
（早速このサイトのロゴのリンク部分に使いました。書いてみたCSSファイルはこちら。）
西畑さんへ
将軍が嫌でしたら随時、他のあだ名に変えますのでご連絡ください。 (from 佐藤)
ケンジ
（世界観にそぐわない小声が聞こえるけど、俺は気にしないぜ！
　空気が読めるタイプの人間だからな！！）
この辺に注意しながらバンバンPNG使っていけばOKだね！！
トモ・リーン
そうね。
ケンジ
とりあえずこのネコサイトのTOPページ、作り終わったね！
トモ・リーン
・・・・・・。
そう。じゃあ、これではじめてのCSSは終わりです！
今までのご愛読ありがとうございました。
ケンジ
こらーーー！
Firefoxの機能拡張とか印刷仕様の作り方とか色々伏線まとめて放置かよ！！
そんなオチが許されるのは大作アニメだけだぜ！！！
（大作アニメでも俺はゆるさないけどな！！）
トモ・リーン
う、ふふ。
ちょっとその辺忘れてたわ。
じゃあ、ネタを仕込むから１ヶ月待って！！
ケンジ
仕込みが必要なんだな、分かったぜ！！
トモ・リーン
ごめんね〜。
次回は11月10日ぐらいに更新します。
よろしくね〜〜〜！！！
今回のポイント！
PNGは扱いが面倒だけど、使いこなせばデザインの幅が広がりますよ！！
コメント(2)
西畑一馬

ちょっと、将軍ってｗ

あだ名じゃないと駄目なんです？

(あだ名じゃないと駄目ならそのままでｗ)

2008/11/10
佐藤とも子 Author Profile Page

そのまんまより、あだ名の方がファンタジーな世界観が生きるような気がするんですよね！
将軍OK、ありがとうございます！！

2008/11/10