はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
デザイン通りに組む！　～透過PNG～
2008/10/06
ケンジ
ふー！
ここまで来たか。残るはラスボス最終形態、巨大ネコ画像透過のみだね！！
図：今回の作業箇所
トモ・リーン
そうね。
ケンジ
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です。
→ PNGまとめスライドを表示 (PDF ４MB)
トモ・リーン
このPDFの30ページ罠その４だけど、この方法じゃなくてリンクがおかしくなったaに対してposition:relative;を使うと回避出来るらしいわよ。
佐藤さんがイベントでの発表後、近所にいたCSS将軍に教えてもらったネタらしいわ。
（早速このサイトのロゴのリンク部分に使いました。書いてみたCSSファイルはこちら。）
西畑さんへ
将軍が嫌でしたら随時、他のあだ名に変えますのでご連絡ください。 (from 佐藤)
ケンジ
（世界観にそぐわない小声が聞こえるけど、俺は気にしないぜ！
　空気が読めるタイプの人間だからな！！）
この辺に注意しながらバンバンPNG使っていけばOKだね！！
トモ・リーン
そうね。
ケンジ
とりあえずこのネコサイトのTOPページ、作り終わったね！
トモ・リーン
・・・・・・。
そう。じゃあ、これではじめてのCSSは終わりです！
今までのご愛読ありがとうございました。
ケンジ
こらーーー！
Firefoxの機能拡張とか印刷仕様の作り方とか色々伏線まとめて放置かよ！！
そんなオチが許されるのは大作アニメだけだぜ！！！
（大作アニメでも俺はゆるさないけどな！！）
トモ・リーン
う、ふふ。
ちょっとその辺忘れてたわ。
じゃあ、ネタを仕込むから１ヶ月待って！！
ケンジ
仕込みが必要なんだな、分かったぜ！！
トモ・リーン
ごめんね〜。
次回は11月10日ぐらいに更新します。
よろしくね〜〜〜！！！
今回のポイント！
PNGは扱いが面倒だけど、使いこなせばデザインの幅が広がりますよ！！
トラックバック(0)
このブログ記事を参照しているブログ一覧：デザイン通りに組む！　～透過PNG～
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/105
コメント(2)
西畑一馬

ちょっと、将軍ってｗ

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

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

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

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

2008/11/10
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4