ホーム >  Blog > CSSのお話し(レイアウト編)
2010年06月19日

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屋に制作依頼された会社様・ショップ様は、一度ご自分のパソコン環境と違う環境でホームページをご確認されて方が良いですよ。

page-top