ブラウザが違うと制作中のHPの表示が異なってしまう

質問

HP制作初心者です。
macのテキストエディットでHPを作っているのですが、だいたいのレイアウトや全体像ができたところでWinのIE（バージョンまでは確認していません…）で表示してみたところ、レイアウトやフォントなどmacのsafariとかなり違いがありました。
制作中のHPをおおまかに書くと、背景などは使っていなく（白）、すべてosakaフォントの10pt～7pt、基本レイアウトはcssによるヘッダ・本体・（フッダ）の構成でfloatは使っていません。
レイアウト崩れなど回避できた所もあるのですが、
今解決できないのはWinのIEではフォントの違い（→WinではMS Pゴシックが表示されるようにしています。その他sans-serifとsans-serifに分類されるフォントも指定しています）によって字詰めや大きさが変わってしまう（ひとまわり小さくなるようです）、古いIEでは定義タグが一部効かない箇所がある、トップページは中央に画像一つとコピーライト（画像）なのですがフッダで画面の下に配置したコピーライトが中央の画像にかぶってしまう。などです。
自分の環境がmacのsafariとfirefoxしかなく、調べてみるとIE6などバグが多く発生するらしいもののシェア率がかなり高いようなので、いっきに不安になりました。

なんとなく全ての環境で同じように見えるというのは無理そうな事が分かってきたのですが、ブラウザが変わっても、見え方が近くなるこつなどはあるのでしょうか？
また、HP制作でそれらをさける為にまずやるべきこと。などがあれば教えていただきたいです。
HP制作用のソフトを使えばいいのか？など分からないことだらけなのですが、何かアドバイスなどあれば、よろしくお願いします！

回答No.1

noname#158634 · ベストアンサー

＞ブラウザが違うと制作中のHPの表示が異なってしまう
仕様です。

IE6はまあどうでもいいとして(笑)、とりあえずいくつか。仕事ではないようなのでそれを踏まえて大まかにです。
初心者にいきなりガチガチに「正しいこと」だけ教えても意味無いので。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

＞osakaフォントの10pt～7pt
「フォントサイズ指定するな」。現代のアクセシビリティの基本です。
＞古いIEでは定義タグが一部効かない箇所がある
定義タグが何かわかりませんが、「昔のIE」はHTMLの規格に全然沿ってないものなので気にしない。よほどじゃない限り7、8(、9)だけで問題なければひとまずOK。
＞画面の下に配置したコピーライトが中央の画像にかぶってしまう。
あからさまに想定外の表示になる場合、それはHTMLとCSSが悪い。floatなしでかぶってしまうのがどういう状況か理解しかねますが、マークアップとスタイルがちゃんとしてれば要素が重なるなんてありえない。
＞シェア率がかなり高いようなので
さすがにそれはない。IE自体は大きなシェアをもっていますが現在では7、8が中心です。
＞見え方が近くなるこつ
きちんとしたHTML、CSSを書くこと。それが一番です。ブラウザごとの差で困るということは、現在のマークアップとスタイルがきちんとまとまっていないということです。見た目を同じにしようとするのではなく、少しくらいの違いが出ても問題がないように書きましょう。
検証は下記サイトで。
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
http://jigsaw.w3.org/css-validator/manual.html.ja
＞HP制作用のソフトを使えばいいのか？
これは絶対ダメ。「HP制作」についてはまあツッコミ入れませんけども、要するにHTMLのオーサリングツールですが、多少は改善されているものの碌なソースをはきません。今は多少基礎知識が身についてきている状況だと思いますので、今からそんなものに手を出したら逆効果もいいとこです。

※ついで
footerは「フッダ」とは読まないなあ。

お礼

諸問題に対し、ていねいに解説していただいて大変参考になりました。
初めての事なので自分の環境での見え方しか頭になく、IEでの見え方にはびっくりすると同時にかなり萎えてしまい途方に暮れていましたが、だんだん色々な事が分かってきました！
分かりづらい質問や用語の書き間違いなど恥ずかしい限りですが、基本的な所からもう一度見直してみようと思います。
ちなみにソース検証用のサイトがあることも知りませんでした！
勉強になりました。
どうもありがとうございました！