フレームがくずれる

質問

今までIE6を使っていたのですが、FireFoxを使い始めました。
FireFoxを使うと、テーブルやインラインフレームの表示が乱れることを初めて知りました。

私もサイトを公開しているのですが、HTMLなどを操作してインラインフレームなどが乱れないようにする方法はないでしょうか。
また、「HTML　互換」などをキーワードに自分で調べたところ「ドキュメントタイプ宣言」というものを知ったのですが、これを使えばインラインフレームなどの乱れを防ぐことはできるのでしょうか。
よろしければドキュメントタイプ宣言がどういうものなのかも説明していただけると助かります。

回答No.3

abril · ベストアンサー

> 乱れはブラウザの文法解釈の違いによって起こるものだということをはじめてしりました。

「文法解釈の違い」というより、"文法が間違っているのだから"「乱れて当然」のものが、IEでは「乱れてくれない」という事が多々ある、と思っておいた方が宜しいです。とにかくIEはブラウザ界の問題児なのですよ。そのくせ圧倒的シェアを誇るものですから、悩ましいのです。

> 文法ミスのチェックはどのように行えばよいのでしょうか。お薦めのサイトなどを教えていただければと思います。

「文法」のチェック・採点だけなら下記が最強だと思います。非常に有名且つ歴史のあるサイトです。
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

大親分のW3CのサイトにもValidatorがあります。ただし英語ですが。
http://validator.w3.org/

補足

サイトの紹介、ありがとうございました。
解析してみた結果、ミスが沢山ありました。
難しそうですがこれをもとに修正を頑張ってみます。

ところでちょっと本題とずれるのですが、firefoxで正常に表示されればどのブラウザでも正常に表示されるものなのでしょうか。
それとも、firefoxで正常に表示されても他のブラウザでは乱れるということは頻繁に起こりうるのでしょうか。
本題と関係のない質問で申し訳ないのですが、ご回答をいただけるとありがたいです。

回答No.4

abril

> ところでちょっと本題とずれるのですが、firefoxで正常に表示されればどのブラウザでも正常に表示されるものなのでしょうか。
> それとも、firefoxで正常に表示されても他のブラウザでは乱れるということは頻繁に起こりうるのでしょうか。

対IEほど「頻繁」ではないですが、Firefoxと他の主要モダンブラウザでの表示結果においても、それぞれのブラウザの仕様に準じて解釈が変わる事は、ケースバイケースであります。(X)HTMLでのマークアップに関しては（解釈ゆるゆるのIE以外）あまり差はないと思いますが、主にそういった違いはCSSでの指定の組み合わせにおいて起こったりします。あと、JavaScriptなどでも環境によって挙動が違ったりすることはあります。こういった事は、とにかくそれぞれの仕様を理解し数をこなし経験を積む事で対応策を身につけて行くしかありません。

制作者は複数のメジャーなブラウザでもほぼ支障なく見える様に作成を心がける様にしています。閲覧者の環境はブラウザ＋OS＋それぞれのヴァージョン、という組み合わせだけでも結構な数になってしまうのですが、全環境をカバーするのは実質無理（例えば極端な話10年前のヴァージョンのブラウザへの対応までしていたのでは現実的ではない）なので、まあそこそこ主流かと思われる環境を想定するに留まりますが（クライアントの希望によっては、ある特定の環境だけをターゲットにして作成する事などもあります）。これの線引きは難しいですし、それぞれの制作者のポリシーやクライアントのニーズなどにも左右されますので、一概に「これさえチェックしておけば大丈夫」という基準はありません。まあ個人的には、可能であればIE、Firefox、Safari、Operaそれぞれの最新版（とできれば一つ前ぐらいのヴァージョンも）でのチェック程度はしておいた方がベターかな、とは思います。

お礼

有難うございました。

とりあえず、これからはsafari、orera、Sleipnirも使って確かめてみることにしました。
丁寧に何度も答えていただいてありがとうございました。

回答No.2

abril

> FireFoxを使うと、テーブルやインラインフレームの表示が乱れることを初めて知りました。
> 私もサイトを公開しているのですが、HTMLなどを操作してインラインフレームなどが乱れないようにする方法はないでしょうか。

具体的なソースがないと、何が原因でどの様に修正すれば「表示が乱れること」が解消されるかは指摘できませんが、十中八九、(X)HTMLの文法ミスやCSSの不適切な指定等がある為ではないかと思われます。文法チェッカーにはかけられましたか？

IEだけを基準にして作成しているとこの様なトラブルがおこりがちです。IEはFirefoxなどに比べるととにかく文法ミスに対する解釈が甘く、ブラウザ側で勝手に補完してしまったりするので「問題なく出来ている」様に見えてしまいます。また、CSSについても仕様に準じない独自の解釈が少なくなかったりするので、IEで丁度良く見える様に指定すると他のモダン・ブラウザでは意図した表示にならない、またはその逆、という問題にも度々悩まされます。
ですので、他の同様のスレッドでもよく指摘されているのが、先ずは「IE基準で作成せず、Firefox等できちんと表示される様に作成し、その上でIEの表示に対応できる様に（CSS等を）調整して行く」というやり方です。

(X)HTMLのコーディングやCSSの指定が適切であるかどうかをチェックした上で、原因を特定→取り除ければ「テーブルやインラインフレームの表示が乱れ」ない様にできます。そこが肝心・重要なポイントなので、

> 「ドキュメントタイプ宣言」というものを知ったのですが、これを使えばインラインフレームなどの乱れを防ぐことはできるのでしょうか。

というわけではないのです。勿論、DOCTYPEの違いが表示に関わってくるケースも存在していますので、全く関係がないとも言い切れませんが（何せソースが不明なので…）、ちょっと問題の本質がずれている様に思われます。
先ずは作成する(X)HTML文書に合わせて相応しいDOCTYPEを選び、ファイル内でそれを宣言します。宣言したら、それぞれのDOCTYPEに相応しい決まり事に従ってマークアップをしなければなりません。中には「インラインフレーム」を使用する事が推奨されないDOCTYPEもありますので「インラインフレーム」が使いたければ自ずと選択できるDOCTYPEは限られてきますので注意して下さい。
質問者様は今までDOCTYPE宣言をせずに(X)HTML文書を作成してきたのでしょうか？(X)HTML文書において、DOCTYPE宣言は必須です。

お礼

丁寧な回答をありがとうございました。

乱れはブラウザの文法解釈の違いによって起こるものだということをはじめてしりました。
さらに質問なのですが、
文法ミスのチェックはどのように行えばよいのでしょうか。
お薦めのサイトなどを教えていただければと思います。

回答No.1

neddoheny

一応「ドキュメントタイプ宣言」に関するリンクも貼っておきますが。
http://rich.pleasure911.com/hp_tech/hp_tech05.html

お礼

neddoheny様、回答ありがとうございました。
教えていただいたリンクをもとに勉強してみます。