ブラウザごとののコーディングについて

質問

CSSについて初心者なため質問させていただきました。

動作環境はwindowsのIE7を使用しております。
windowsでHPのコーディングを行い、ブラウザ毎の確認を行った時、
IE7では正常に見えているのに、Macfirefox,Macsafari,IE6,IEfirefoxそれぞれで見え方が違い、デザインが崩れて表示されるブラウザもあります。
この場合、上記のブラウザ以外にも、崩れて表示されている確立が高いと思いますが、
どのブラウザも崩れずに表示させるためには、CSSの最初にどのようなコードを記述すれば良いのでしょうか？

お返事がいただければ幸いです。

回答No.1

noname#83877 · ベストアンサー

最初の指定というよりは指定法によって変わってきます。
それぞれのブラウザごとに仕様が異なるので、まずは同じ状況を作り出す指定基準を見つけることが重要です。
表示確認のブラウザはFirefoxにしてみてください。多分一番クセがありません。
ブラウザごとにcssの対応度も違うので、cssレベルはIE6を基準にされると良いと思います。

ちなみに一つずつバグを上げるのは多すぎて無理です・・・
ブログなどを回って情報を集めてみると良いと思います。
http://mb.blog7.fc2.com/blog-entry-83.html

お礼

ありがとうございます。大変参考になりましたっ。
今後はFirefoxをメインに作成して行こうと思います。

回答No.5

ganmo717

まず、ＩＥ７では正常に見えていると思いますが、本当はＩＥのバグなのに偶然に正常に見えているんです。表示の確認は最初FIREFOXで見て次にＩＥでみてください。

FIREFOXで正常に表示できたら、ＩＥで正常に表示できるまでCSSの調整してどうしてもできないならcssハックです。

お礼

ご解答ありがとうございます！。
ブラウザ毎の確認する順番が大事だったのですね。
これまでが、常にIE7から確認をしてきていたので、今後はFirefoxから確認をしようと思います。
ご教授ありがとうございました＞＜。

回答No.4

karita_83

>ANo.2様の言及されているreset.cssというものも、各ブラウザ毎のマージンなどのディフォルト値をリセットする為のものであり、各ブラウザのバグや解釈違いを解消する機能を持つわけではありません。

失礼いたしました。私のあの書き方ですと、本当に全部魔法みたいに直りそうな言い方をしていましたね・・・。

恥ずかしくてお礼を言いたくて解答欄をひとついただきました
abrilさまありがとうございます

回答No.3

abril

最初にお断りしておきますが、

> どのブラウザも崩れずに表示させるためには、CSSの最初にどのようなコードを記述すれば良い

という魔法の様なものは残念ながら、ありません。基本はANo.1様の仰る通りなので…
ANo.2様の言及されているreset.cssというものも、各ブラウザ毎のマージンなどのディフォルト値をリセットする為のものであり、各ブラウザのバグや解釈違いを解消する機能を持つわけではありません。

ただ、質問者様が見え方を同じにしたい、と仰る
Firefox（ver.2～3？） on Win、IE6/IE7 on Win、Safari（ver.3？） on Mac
程度であれば、適切なマークアップとスタイルの指定をしていれば、（よほど無謀なデザイン性を持つものでない限り）ほぼ同様の結果を得る事が充分可能です。場合によっては所々にハックやコンディショナル・コメントを併用する事は余儀なくされるかもしれませんが、その程度のプラスαで解決はできる、という事です。

「CSS　バグ」などのキーワードでググると、ぞろぞろ情報が出てきますので、まずは主なものだけでも把握してみて下さい。
それから、「後方互換モード」「標準準拠モード」についても意識しておいた方が良いと思います。
【参考】http://2xup.org/log/2007/07/27-2111

お礼

ご解答ありがとうございます！。
デザイン性は込み入ったものではなかったので、恐らくブラウザ対応の指定が甘かったための問題だったのですね＞＜。

今後作る作成物に生かせる様、もっと調べてみようと思います。
ご教授ありがとうございました！。

回答No.2

karita_83

もう、そのサイトは完成してしまっているのでしょうか？

それですと、すごく作業としては大変になってしまうと思います・・・。

http://youmos.com/news/yui_reset_css

ここに書いてある、reset.cssというものを一度入れていただいて、
ブラウザの表示を一度全部一緒にしてから、書き出すと比較的楽かと思います。

それでも、そのブラウザごとの癖（？）みたいなものがありますので、
そのあたりはいろいろいじりながら悩みながらの作業になると思います。

なれるとcssはとても楽しいです。
どうぞがんばってください！

お礼

参考サイトを教えてくださってありがとうございます！。
サイトの方はもう完成したものだったので、一先ず地道に揃えることにしました＾＾；。
新しくサイトをリニューアルする時に、もう一度チャレンジしてみますっ。