吉田哲也ブログ(仮): css アーカイブ

2011年04月29日

CSSでIE6対策をする必要性

今日も2時間ほど、IE6対策で時間を無駄にしてしまったので、IE6対策をする必要性について考えてみました。

InternetExplorerの6はCSSを独自の解釈で再現してしまうので、レイアウトが崩れたり、横幅・高さが狂ったり、Web屋を困らす憎いブラウザです。

しかも未だに、日本では10%以上の人がIE6を利用しているという調査結果も出ています。

The Internet Explorer 6 Countdown

IE6対策をしない場合、直帰率がどれだけ上がるか、コンバージョン率がどれだけ下がるか、数字を推測するのは難しいですが、もし、完全に見れなくなると仮定すると、アクセス数の10%を無駄にしてしまうことになります。

逆に考えると、IE6対策をするだけで90分の10、約11%アクセス数を増やすことが出来ます。

11%アクセスを増やすために広告などにかける継続的な費用と、IE6対策にかける数時間の人件費と、どちらが大きいのか考えると、今のところ、IE6対策をしちゃったほうが割安な気がします。

（これは自社サイトや成果報酬ベースでもらえる案件の場合ですが。）

IE6対策しなくても良いというクライアントはまだ少ないだろうし、web屋として全てのブラウザでちゃんと見れるサイトを作るべきですが、IE6対策をする時間の工数も予算に反映できるなら、費用対効果も考えたほうが良いかも知れません。

早くIE6のシェアが無視できるレベルまで下がってくれれば、こんな面倒なこと考えなくてよくなるんですけどね。

未だに、IE6を使っている方はセキュリティー上も問題があるので、早く最新のブラウザにアップデートしてください。

投稿者 yossy : 21:49 | コメント (0) | トラックバック | △TOP

2009年07月13日

リストタグ使用時のInternetExplorerの変な隙間解決法

リストタグ＜li＞＜/li＞でメニューバーなどをコーディングしたときに、
InternetExplorerだけ変な隙間が出ます。

※下記サイトにサンプルがあるので、InternetExploreとFirefoxで見比べて下さい。
≫　リストタグを使用時のIEでの変な隙間を消す

ただ、このサイトの対処法だと、
該当するliに

-----------------------------
line-height:0;
-----------------------------

を書き加えれば大丈夫らしいのだが、上手く修正されなかったので、

-----------------------------
#menu li {
font-size:x-small;
list-style-type:none;
line-height:1em;
}
#mn01 a {
display:block;
width:190px;
height:32px;
}
-----------------------------

と、こんな感じで、該当するLIに「line-height:1em;」を書き足したところ、IEでの変な隙間は解消。

投稿者 yossy : 11:50 | コメント (0) | トラックバック | △TOP

2008年10月10日

CSSとJavaScriptで本文HTMLをタブ切り替え

タブで切り替えて、同一HTML内のコンテンツを切り替える方法として、
たつをさんのページのスクリプト
≫　CSS と JavaScript でタブ切り替え
を参考に構築していたのですが、ページのフッターの下に謎の余白が・・・。

いろいろなサイトを見ていたら、コンテンツの表示・非表示にvisibilityを使っているのが原因のようだったので、下記の太線箇所を、displayに変更。

------------------------------------------
function seltab(bpref, hpref, id_max, selected) {
if (! document.getElementById) return;
for (i = 0; i <= id_max; i++) {
if (! document.getElementById(bpref + i)) continue;
if (i == selected) {
document.getElementById(bpref + i).style.display = "inline";
document.getElementById(bpref + i).style.position = "";
document.getElementById(hpref + i).className = "open";
} else {
document.getElementById(bpref + i).style.display = "none";
document.getElementById(bpref + i).style.position = "absolute";
document.getElementById(hpref + i).className = "close";
}
}
}
--------------------------------------------------------------