CSS HappyLifeさんで面白い記事があったので便乗させていただきました。
IE6の利用者だけに右上に「アナログ」という画像が表示されます。
意味？
そんまんまだとおもいます。。。
いつまでも古いブラウザ使ってたら、見る事のできる良い物も見れなくなっちゃうよー。って事です！（多分）
このブログもIE6の対応は適当です・・・。
すいません。
面白かったんでついやってしまいました。
興味のあるかたは、CSS HappyLifeさんに詳しく書いてあります。
まず注意しないといけないのが、IEへの対策。
IE6以下は透過PNGに対応していないので背景が真っ白で表示されてしまう。
対応策は色々あるけど、今回は使い勝手もいいスクリプトを用いた対応策をご紹介します。
使ったスクリプトを提供しているサイト。
Post Production - A Better IE 5.5 and 6 PNG Fix
上記サイトの「Get the code」からソースをダウンロード。
ダウンロードしたファイルを任意のフォルダにいれておく。
コードはCSSを利用してHTML内の画像要素に適用させる。
CSSソース
img {
behavior:url(任意のパス/fx-iepngfix.htc);
}
上記のソースだと全てのimg要素に対してスクリプトが適用される。
背景画像などに適用させたいときは、
.contents {
behavior:url(任意のパス/fx-iepngfix.htc);
background:url(任意のパス/sample.png) no-repeat top left;
}
などと記述すればよい。
これでお手軽にIE6以下でも透過PNGを利用することができる。
スクリプトは他にもあるので自分が使いやすいものを利用して透過PNGを有効活用してみてください！
代表的なものを他に2点あげておきます。
TwinHelix - IE PNG Fix v1.0 / 2.0 Alpha 3
jQuery JavaScript Library - jquery.pngFix.js
ちなみに、当ブログでも透過PNGを使っていますが、使っているスクリプトは「IE PNG Fix」を使っています。
今回は、あえて自分の使っていない物をご紹介しましたが、「A Better IE 5.5 and 6 PNG Fix」は使用するファイルがスクリプトファイルのみなので始めて透過PNGを使う方にはオススメかもしれません。
例えば、aタグにクラスを付けてマウスオーバーのCSSを設定したとき。
<a href="index.html">テスト</a>
上記のようなリンクがあるとする。
そこに、「class=”active”」なるものを付加する。
このクラスにはリンク先のページに飛んだときに常にマウスオーバーと同じ効果を付けておく為のクラスです。
<a href="index.html" class="active">テスト</a>
今はこのページにいるよー。って言うのをわかりやすくメニューの見た目を変えるものです。
サンプルのリンク先に飛んだら、メニューもマウスオーバー状態になっているんですが、どうやらIE6ではなっていない・・・。
うーむ。
マウスオーバーしたときはちゃんと記述通りの動きになるんだが・・・。
他のブラウザではちゃんと動くみたい。
試しにIDに変えてみた。
動いた。
セレクタのレベルの違いなのかな・・・。
よくわかんねっす。
でも、こういった書き方しないしな・・・。
しかし、ちょっと調べないと。。