ブログの見え方はブラウザによって違う

ブログのレイアウトはブラウザによって違いますが、特にIEの場合はバグが多く、ブログのレイアウトが崩れて表示されることもしばしばです。

特にIE6では、マージンの値が通常の2倍になってしまったりするんで、レイアウトを考える際は、なるべくバグを回避するようなブログの作り方をする方がいいかと思います。

ただ、最近はIE7の次のIE8まで出てきていて、バグの方も修正されているようなのです。

IE8が出てきた現在、ブログのレイアウトが崩れるという話は、もうすでに過去のものと思っていたのですが、以前としてブラウザシェアにおけるIE6ユーザーの割合は多いようなんです。

IE7の評判が悪かったのはしょうがないですが、わりと好評のIE8が出てしばらく経過した現在でも、アップグレードの方はそれほど進んでいないもようです。

当ブログのアクセス解析を見てみると、IEが65%、ファイアーフォックスが21%、そのほか、サファリ、グーグルクロムで数%ぐらいの割合になっているようです。

この65%のIEのうち、約50%がIE7,約30%がIE6,残り20%がIE8という割合です。

当ブログではこんな感じですが、一般的なサイトの場合でも、けっこうIE6の割合が多いっていう噂をちらほら聞きます。

そのようなわけで、バグの多いIE6で自分のブログがどのように表示されているのかは、一度確認しておいた方がいいかと思います。

当ブログの場合でいうとこんな感じです。

Firefox 3.5.2 での表示



IE6での表示



IE6の場合はレイアウトが崩れてしまって、右サイドバーがなくなってしまっているようです。

この修正方法にもいろいろあるとは思いますが、私の場合だと、左サイドバーもしくは右サイドバーをちょこっとだけ小さくして、余白スペースを作ることで簡単に回避しています。

絶対指定でのレイアウトの場合、通常だと、全体の幅が900pxだとしたら、左に600px、右に300pxとかって割り振りますが、全体の幅をそのままに、内側のボックス要素の幅を少し少なくするという感じです。

今回は左サイドバーの幅を4pxぐらい小さくしたら収まったんで、そんな感じで修正してみました。

外国では企業によるIE6の撲滅運動が活発化したりもしていますが、わたしはIE6の修正作業自体は、スタイルシートの勉強にはけっこう役立つことも多かったりもします。

そんな意味でも、一度はIE6あたりでのブログの表示がどうなっているかは確認してみた方がいいですが、上位のバージョンのIEを6にロールバックするのはなかなか大変なようです。