webサイトの表示に違いがでるのはなぜ？

質問

このたびWEBサイトを作成しました。
フリーソフトを使用して、初心者が作りました。

自宅PCはvista、会社PCはXP環境です。
自宅から自分の作ったページを見る分にはなんら異常はありませんが
会社のXPより閲覧すると、表示にずれがあったり、
画像だけが表示されないページがあったり、
はたまた、知人のPCから見てもらうと
700pixel×2,000pixelぐらいの幅で作成したページが
横長？横方向にずれて？ともかく
作成したサイズとは全く違った表示となっている模様です。

このような原因が理解出来ないほどの初心者です。
どなたかご教授頂けませんでしょうか？
どうかよろしくお願い致します。

使用したフリーソフトは「alphaEDIT」です。
言語知識はありません。^^;

回答No.3

noname#83877 · ベストアンサー

崩れ方がひどいようなのでおそらくcssでIEで確認しながら作られたのだと思います。
まずはFirefoxで表示できるようにしてみてください。

最初の関門はhtmlの書き方だと思います。
tableやdivは使い方をわきまえてください。
目的に合ったタグを使うように少し気を使えば大丈夫だと思います。
完成したらhttp://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlでチェックしてください。
ここがしっかりしていれば後で崩れる原因になりにくいです。

cssではレイアウトにもよりますが、配置に使うのはpositionではなくfloatでやる方が良いです。
width、float、clear、margin、padding
これだけあればある程度はサイトの形を崩さずにレイアウトできます。
その際、これをhead内にコピー＆ペーストしてください。

<!--[if IE]><style type="text/css">*{zoom:1;}ul,ol,li,acronym,abbr {zoom:normal;}</style><![endif]-->

魔法の呪文です。
作る前に、下記サイトの　バグや挙動の違いを確認　も一読されると良いと思います。
http://adp.daa.jp/web.html
後はfirefoxで完成したらIEに持っていき、確認と修正の繰り返しです。
この方法で作れば、自然とIE6と7(xpとvista)の表示も同じになります。

お礼

metametamu様
ご回答ありがとうございました。

ご指摘の通り、「IEで確認しながら」作成しました。
ご回答頂いたサイトを利用してチェックをしてみます。
ド素人には問題山積でして、まずその問題が理解できるか
甚だ疑問ではありますが、少しでも理解できるよう努力したいと思います。あまりに安易に考えていたようです(；一_一)
魔法の呪文が理解できるようになるまでは、果てしなく険しい山。。
しかしながら、とても親切な解説をして頂き、
誠にありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

EmEditorや秀丸を使えば優れたページが作れるわけではありません。
おそらくHTMLの書き方、CSSの書き方に原因があるでしょうが、
どんなHTMLを書いてどんなCSSを書いたかがわかりませんので、どのように修正すればよいかのアドバイスはできません。
EmEditorを使ったからといって、HTMLやCSSが勝手に書き換わることもありません。

AlphaEditを使われている環境でIE6しか入っていなければ、
IE7をインストールしてからAlphaEditを使ってみてはいかがでしょうか。
たぶん、
> 700pixel×2,000pixelぐらいの幅で作成したページが
> 横長？横方向にずれて？ともかく
こういう状態で表示されると思いますので、それで調整してみてください。

お礼

taloo様
ご回答ありがとうございました。
IE7の環境の下、ソフトを使用して作成しましたのですが、
「CSSが勝手に書き換わるもの」だと思っていました(^^ゞ
無知にもほどがあるのは承知しているのですが、、
あまりに常識がなかったようです。

回答を付けて頂き、誠にありがとうございました。

回答No.1

ORUKA1951

最も必要な知識が・・
　HTMLとは、その目的は、あらゆる端末(解像度の異なるディスプレイ、異なるOSなどのプラットホームの違い、読み上げソフト、点字端末、PDAや携帯端末、サーチエンジンのようなプログラム)・・このどれであっても利用可能な情報提供の手段であって、ワープロやDTP(組版ソフト)のように、印刷結果を作成する言語ではないということです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
2.2.1 HTMLの略歴
HTMLは初め、 Tim Berners-Lee がCERN【ヨーロッパ素粒子物理学研究所】在籍時代に開発し、NCSA【全米スーパーコンピュータ応用研究所】が開発したMosaicブラウザによって一般化した。
・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

☆ワープロとは違う!!!
　デザインするのではなく、何が見出しか、何が引用か、何が重要かを示すもの。

　そのためには、メモ帳などのテキストエディタで書いてみること。
【参考サイト】
はじめてのWebドキュメントづくり
　 http://www.asahi-net.or.jp/%7Esd5a-ucd/www/

　優れたテキストエディタもあります。
　EmEditor( http://www.vector.co.jp/soft/winnt/writing/se047993.html )
　秀丸エディタ ( http://www.vector.co.jp/vpack/filearea/win/writing/edit/hm/ )
もあります。

お礼

ORUKA1951様
ご回答ありがとうございました。

ドキュメント作りなど全部ソフトが勝手にやってくれるもんだと思ってました。。ご指摘いただいたサイトを参照し
最低限知っておかなければならない事を少しづつ勉強します。
ありがとうございました！