DN*blog

アクセス解析にはGoogle Analyticsを使っているんですが、ブラウザの使用率を良く見ています。

やはり、IEが多いですね。。。
次いでFirefoxです。私もFirefoxを使っていますが自分のIPははじくように設定してあるので自分のアクセスは入っていないです。
もっともっと増えてくれればいいのに！（笑）

なにげにGoogleのブラウザ「chrome」ががんばっています。

さて、一位のIEですが、使用率をバージョン違いで見ると・・・、

以外に、IE7が多いんですね。IE6とほぼ互角の使用率！
IE5はMacの方でしょうか。
IE8がちらほら・・・。レイアウト崩れてたら申し訳ありません。

IEのシェアが70、80％って言われているのに他のブラウザはなにげにがんばっていますね。
内容がもっとWebデザイナーに役立ちそうな事だったりするとIEの使用率もさがってくるんでしょうかね？

IEのシェアを追い抜くブラウザは現れるのか！？

番外で、OS使用率も見てみました。

やはりWindowsですね。
iPodは、iPod touchだと思います。

もう少し、Macユーザーがおおいかなーって思っていたんですが、そうでもないみたいですね・・・。

iPhoneすくねw

まず注意しないといけないのが、IEへの対策。
IE6以下は透過PNGに対応していないので背景が真っ白で表示されてしまう。
対応策は色々あるけど、今回は使い勝手もいいスクリプトを用いた対応策をご紹介します。

demoサイト

使ったスクリプトを提供しているサイト。
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に変えてみた。

動いた。

セレクタのレベルの違いなのかな・・・。

よくわかんねっす。

でも、こういった書き方しないしな・・・。
しかし、ちょっと調べないと。。