CSSのお話し（レイアウト編）

こんにちは大阪のWEB屋　CUBESです。

先日「CSSのお話し（文字編）」でブラウザー・OSによって
行数やレイアウトのイメージが変わって見える記事を書きましたが、
今回はブラウザーによってはCSSを間違った解釈をするネタです。

ちょうど、アメブロカスタマイズしているので、
このBLOGをサンプルに説明させていただこうかと・・・。

まずは、この画像をご覧ください。

ブラウザーによって見え方が異なります。
Internet Explorer 8で見た場合は、おねーちゃん画像の下にメニューが表示されますが、
Internet Explorer 6では、おねーちゃん画像の上にメニューバーがカブって表示されます。

これが、WEB屋泣かせのInternet Explorer 6バグです。
ホームページを作るときには電卓片手に、レイアウトを数値で計算して作っていくわけですが、Internet Explorer 6は独自の計算（バグ）で、こんなレイアウトになるわけです。

しかも、レイアウトが崩れるのはInternet Explorer 6だけではありません。
Internet Explorer 7でもレイアウトが崩れます。
最近では、Internet Explorer 8もWindows7の発売で32bit版・64bit版の2種類が存在し、64bit版では綺麗に表示されているのに、32bit版ではレイアウトが崩れているってことも有ります。
WindowsだけではなくMacで見たときにも崩れていることがあります。

対処方法としては、Internet Explorer 6用のCSSを別に作って、ホームページ閲覧者がInternet Explorer 6を使用している場合はInternet Explorer 6用CSSを使用するって作り方をするわけですが、コレが非常に面倒なのです。と言うのは、各ブラウザーごとのCSSを書いて、各ブラウザーで問題なく表示されるか検証するわけです。

僕の場合、お客さんのホームページ作成時に最低でも下記環境でレイアウトチェックをしています。

Windows XP – Internet Explorer 6
Windows XP – Internet Explorer 7
Windows XP – Internet Explorer 8
Windows XP – FireFox
Windows 7（32bit） – Internet Explorer 8
Windows 7（64bit） – Internet Explorer 8
Windows 7 – FireFox
Windows 7 – Safari
Mac（OS-x） – Safari
Mac（OS-x） – FireFox

この動作チェック・レイアウトチェックが時間がかかる作業なのですが、WEB屋として・PROとして、やはり手が抜けないです。（自社サイト・このブログは個人的なサイトなので、最低限のチェックしかしていません。理由は後日ってことで。）

ただ、ホームページ屋によっては、この動作チェック・レイアウトチェックが面倒で、しない会社も多いです。
ホームページをWEB屋に制作依頼された会社様・ショップ様は、一度ご自分のパソコン環境と違う環境でホームページをご確認されて方が良いですよ。