• ベストアンサー

ブラウザによってCSSレイアウトが崩れる

個人でサイトを運営しています。ビルダー等のソフトを使わず、HTMLタグ打ちで作っています(独学です)。テーブルでページをレイアウトするのは好ましくないと言われているので、最近になってCSSでレイアウトするようになりました。 普段ブラウザはIE6を使用していて、一つ一つレイアウトを確認しながら作り上げたのです。しかし、Fxを導入して確認してみると、レイアウトが無茶苦茶に崩れてしまいました。両方で崩れないように調整できたと思ったんですが、次にIE7を導入して確認すると、また大きく崩れるようになってしまいました。これは単に自分のミスなのか(widthやheight、margin、paddingなどで間違いがある)、それともブラウザによって微妙なズレが生じるのは仕方のないことなのか、よくわかりません。どなたかご教授お願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • reda01
  • ベストアンサー率33% (1/3)
回答No.2

こんにちは。私も独学で勉強している者です。 そうしたレイアウトの崩れは、exangelさんのミスという場合もあるかもしれませんが 恐らく『それぞれのブラウザ毎による、CSSの解釈の違い』という面が多いと思われます。 exangelさんが仰る「ブラウザによって微妙なズレが生じるのは仕方のないこと」に当たるかと。 私が聞いたところによると、特にIEはCSSに関して独自の解釈をする部分が多いらしいのです。 しかし他のブラウザ(Fx・opera)は、IEに比べてCSSを忠実に表現する事が多いらしいです。 なのでmonyo28さんが仰るように、Fx・opera・NNなどで確認して 崩れていなければ、exangelさんのミスは少ないという用に判断してよろしいのではないでしょうか。 とはいえブラウザのシェアという点からIEへの対応も大事かと思われますので javascriptなどでの外部CSS振り分け、CSSハック等で、IE用の対応をしていくのが良いかと思います。 (ここは私も勉強中なので、詳しくは他の回答者様等お願い致します) ちなみにIE7はCSSに関してかなり改善(?)されていると聞きます。 まだ私は使った事がないので分かりませんが… なのでIE7とIE6で見え方が違うのは当然なのかも知れませんね。。。 最後に、WindowsとMacの場合では、同じ名前のブラウザ・バージョンで あっても、見え方が違ってくることがあります。 このように全ブラウザで自分の思い通りに表示させる事は結構大変な作業になると思います。 個人サイトなのでしたら、どれだけ多くのユーザーに満足してもらうか どれだけ手間をかけてもいいか等、サイトの性質とも相談しながら お決めになってはいかがでしょうか?

exangel
質問者

お礼

ためになります。個人の趣味でやってるサイトなのに、神経使い過ぎてしまいます笑。かといってソフトに頼るのも何だかなあと思ってしまうんですよね。ありがとうございました。

すると、全ての回答が全文表示されます。

その他の回答 (2)

回答No.3

IE6は後方互換モードと標準準拠モードの2種類あり、普通は後方互換モードになっています。 この場合、IE以外の標準に準拠したブラウザと見え方が違ってしまいます。 IEを標準準拠モードにすれば少しはマシになりますよ。 モードの切り替えはDOCTYPEで行います。

参考URL:
http://ameblo.jp/matchasoft/entry-10018174908.html
exangel
質問者

お礼

DOCTYPEは盲点でした。みなさんの意見を参考に、また頑張ってみます。ありがとうございます。

すると、全ての回答が全文表示されます。
  • monyo28
  • ベストアンサー率9% (4/41)
回答No.1

Fx・operaなどの非IEブラウザ向けに作り 後でIEで確認がいいと思います cssのみのデザインの参考にどうぞ http://css.poromeria.com/ http://www.csszengarden.com/tr/japanese/

exangel
質問者

お礼

どうやらそのようですね。サイトも参考になります。ありがとうございました。

すると、全ての回答が全文表示されます。
このQ&Aのポイント
  • ピータッチエディタのデータ連携で画像を印刷することは可能か?
  • ピータッチエディタのデータ連携で商品画像を印刷したい
  • ピータッチエディタのデータ連携についての質問
回答を見る

専門家に質問してみよう