ＨＰをUPした時に一番外側の余白が変わってしまう

質問

ＨＰをサーバに上げた時に余白がずれることについて質問させていただきます。

仕事でＨＰを作成しています。
経験は浅いです。やっとＨＰ一つ上げられた程度です。
その上げたＨＰなのですが、いざ上げてみると外側の余白が変わっていることに気付きました。
dreamweaverで作成しており、ＩＥ８で完成したものを見ています。
上げる前は下の余白はどのページも共通でした。
なので特に余白に関しては設定しておりません。
いざ上げてみると、ヘッダーからリンクするページはヘッダーからリンクするページ同士で余白が共通になっており、サイドバーからリンクするページはサイドバーからリンクするページ同士で余白が共通でした。
検索して理由を探してみましたが、答えに直結するものはございませんでした。

以前、画像が上げた時に出ない時は拡張子が大文字だったことでないと言う理由がありましたが、余白がずれることもそのような理由というものはあるのでしょうか。
作っているソフトやブラウザは出しましたが、他にこの答えに関する情報を出せそうなら出したいと思うのでそちらもご指摘お願いいたします。
それではよろしくお願いいたします。

回答No.1

4017B

DreamweaverみたいなHP作成ソフトで作ったデータは、その時点での見た目は、実際にweb上にアップロードしてみると、ブラウザでの表示が大きく違う事は良くあります。なので作ったHTMLなどは、必ずアップする前にブラウザで一通り確認して置く事が肝要です。

また現時点では、代表的なブラウザである「IE」と「Chrome」と「FireFox」で、同じHTMLデータでも表示の仕方に違いがあり。完全に同じ様に表示させる事は事実上不可能です。この事は常に念頭に置いて、HP製作作業を進めていかなければなりません。

で、ご質問の「余白」の件ですが。IE8で見てそうなってるのですよね？ならばあなたが作ったHP（HTML）のデータがそうなってるというだけです。ですので何も間違ってはいません。

Dreamweaverは最新版のCS5ならば、プレビュー用のレンダリングエンジンに“Webkit”が使用されています。これは元々はApple社製のブラウザである「Safari」のためのエンジンでしたが。後にオープンソース化されて、Chromeを始めとする最近の多くのブラウザソフトのコアエンジンに使われています。

一方のIE8などに代表される「Internet Explorer（インターネット・エクスプローラ）」は“Trident”と呼ばれるレンダリングエンジンが使われています。このWebkitとTridentの違いが、DreamweaverのプレビューとIE8で見た時の「余白」の違いとなって現れている訳です。

ですのでweb製作に携わる人間は、必ず複数のブラウザで制作物を逐次確認する作業を行いながら、業務を進めていくしかありません。最低限、IE7～IE9とChromeで動作確認をしないと、業務としてweb製作を行うには必須ではないかと思います（FireFoxのエンジンであるGecko系はWebkitとかなり似通った動作なので無視出来る範囲です）。

P.S.
とりあえず、その作ったデータをChromeで表示してみて下さい。IE8とはまた違った表示のされ方をするはずですので。後は交互に見比べながら、納期と相談してどこまで互換性を高めていくか～という作業になります（Dreamweaverのプレビュー用エンジンは、似非Webkitなので、実際のChromeやSafariとは違って見えます）。

お礼

ＩＥチェッカーでバージョンを5.5から8まで調べることができ、vistaで9も調べることもできました。
とは言え、すべてのバージョンを同じように表記するのはかなり苦労した割には現在も多少のずれが直せないでいます。
それでもなんとか誤差が少なくなるようこれからもがんばっていきたいです。
ありがとうございました。

補足

補足させていただきます。
上司の指示がＩＥのみの確認で構わないということで上げる前にＩＥ８の動作確認はしており、その時は余白はすべて共通でした。
しかし、上げた時は余白がずれていました。
どんなに動作確認をしてもDreamweaverで作成している以上、ずれる場合があると言うことでしょうか。

ちなみにDreamweaverのバージョンはＣＳ３です。

本来ＩＥのみの確認で良かったのですが、ＩＥでは正しく印刷できないのでFirefoxを使い印刷した経緯があります。
ＩＥは印刷がずれるのにFirefoxは正しく、ページ通りに印刷できるのはDreamweaverと相性が良かったのが理由なのですね。
ありがとうございます。