FireFoxに対応するホームページの作り方

質問

私は、現在ＨＴＭＬを使ったホームページを持っています。
ですが、最近ある方からの報告で、
FireFoxに対応していないのでは？と
教えてもらいました。

サイトの音楽も、画像のレイアウトもずれているそうなんです。
私自身は、ＩＥで閲覧しているのですが、綺麗に見えるんです。
「FireFoxのユーザーは結構多いから、被害に遭っているかも・・（笑）
それに対応するページの方が良いと思いますよ。」って
仰っていたので、何とかしたいです。

でも私は、FireFoxって言葉すら知らなかったので
対応する方法も全く分からないです。

何からすればよいのかすら、全く検討もつきません。
どなたか詳しく教えていただけると嬉しいです。
ヨロシクお願いします。

回答No.4

seaw · ベストアンサー

IEで正常に見れたら、HTMLやCSSを正しく記述できているというのは誤りです。
IEにもFirefoxにもバグは沢山あるだろうと思われます。

ブラウザは沢山存在しますが、同じエンジンを使っているブラウザも多くあり、同じエンジンを使っているブラウザは動きが似ています。
Mozilla Firefoxは、Geckoエンジンというものを使っていまして、そのエンジンを使っているブラウザは非常に多いです。

Geckoエンジンを使っているブラウザは、Mozilla Firefox(Windows/Macintosh/Linux)の他に、
Netscape(Windows/Macintosh/Linux バージョン8はWindowsのみ)、Camino(Macintosh)、
SeaMonkey(Windows/Macintosh/Linux、SeaMonkeyの旧称Mozilla)、
Epiphany(Linux)、Nautilus(Linux)、K-Meleon(Windows)等。
これらのブラウザの動作は(Geckoエンジンのバージョンにもよりますが)似ているので、
Firefoxで動作確認すれば、他のGeckoエンジンのブラウザでの動作確認は不要だと思います。

Opera、IEはそれぞれ別のエンジンを使用しているので、Opera、IEでは動作確認したほうがいいと思います。

他に、Safari(Macintosh)、Konqueror(Linux)、Tavia(Linux)は、KHTMLというエンジンを利用しています。

ちなみに私は、IE、Firefox、Operaで動作確認しています。(私はWindowsユーザーです。)
Firefoxで見ながらページを作り、後でIE、Operaで動作確認しています。(私自身、普段主に使っているブラウザがFirefoxという理由もありますが…)
Windows版IE6は、FirefoxやOperaに比べてCSSのバグが多いと言われていますから、
私の考えではWindows版IE6で動作確認しながらページを作っていくのは効率が悪いと思います。
(Webサイト作りを仕事にしているわけではない単なる素人の意見ですが…)

お礼

お返事遅くなってごめんなさい。
＞IEで正常に見れたら、HTMLやCSSを正しく記述できているというのは誤りです。
そうなんですね～知りませんでした。
同じエンジンを使っているブラウザは動きが似ているんですね～。
Mozilla Firefoxは、Geckoエンジンで、他の同じエンジンを使っているブラウザでの動作確認は不要なんですね！

＞Opera、IEはそれぞれ別のエンジンを使用しているので、Opera、IEでは動作確認したほうがいいと思います。
凄～い！そうだったんですね！

と言うことは・・・
私が今回新しくインストールしたNetscapeとFirefoxは、
同じなので、どれか一つで調整をしてあとの残りの
Operaを調整してＩＥでＯＫなら大丈夫なんですね！

何だか分かって来ました！嬉しいです。

＞他に、Safari(Macintosh)、Konqueror(Linux)、Tavia(Linux)は、KHTMLというエンジンを利用しています。
初めて知りました。そんなのもあるんですね～。
マック＝Safari(Macintosh)になるのかな？

私もWindowsユーザーです。
（これ言うの忘れていました。笑）
＞Firefoxで見ながらページを作り、後でIE、Operaで動作確認しています。
じゃぁ私も今度からそうしようかなぁ。
とっても助かりました。
seawさん、本当に詳しい説明をありがとうございました。

補足

回答をありがとうございます。
時間が無いので、後日必ずお返事しますね。
じっくりと拝見したいと思っています。

回答No.7

aqucent

#5です。

> >4. 文法チェッカを利用する
> これ、全て英語で説明されていて・・・・読めなくて・・。(汗)
「The W3C Markup Validation Service」以外は日本語で書かれていると思いますが、いかがでしょうか。
特に、HTML-lint は細かくチェックしてくれるのでお勧めです。
100点に拘ることはありませんが、あまり低い点数にならないように心がけると良いかと思います。

お礼

再度の回答をありがとうございます。
私、何か見落としてしまっていたみたいです。
ごめんなさい。
Another HTML-lint gatewayで自分のサイトをチェックしてみました。
そうしたら・・・なんと２００個のエラーが表示されました。
思わずふき出してしまいました。（笑）
点数では、「このHTMLは -501点です。」の評価でした。
初めは５００点かと喜んでいたらマイナス５００点でした。（汗）
それで、綺麗に表示されているのはある意味凄ですよね？
しかも「がんばりましょう。」の文字も・・・・。
それから、致命的な間違いらしい箇所も多数解説されていました。
それが、今回相談したブラウザの対応が出来ていない事が原因でした。

それなりに覚悟はしていたんですが、ここまで悲惨な結果になるって
思いもしなくて・・でも、とっても参考になりました。
１００点満天は無理としても、少しでもマイナスを改善したいと思います。

そそ、W3C CSS 検証サービスでスタイルシートのチェックも
してみたら、「エラー及び警告は見つかりませんでした。」
だったので、ほっとしたのもつかの間。
「スタイルシートが見つかりませんでした。」との事です。
うそぉ～使ったつもりなのに・・と思いましたけど、
それが事実だって事ですよね。

aqucentさん、本当にありがとうございました。（^-^*）

回答No.6

noname#141707

色んなブラウザがある事は、他の方の意見で分かったと思うので、
以下の参考サイトを参照してみてはいかがでしょうか？
どのブラウザでみても相違ない表示をする為のノウハウが書いてあります。

参考URL：

http://www.divlayout.com/

お礼

お返事遅くなって、ごめんなさい。
参考ＵＲＬを拝見してみました。
xhtmlの基本ソースって項目の所に、私の知りたかった情報が
沢山ありました。
例えば、画像の説明文が画像と重ならない様にする方法や
センタリングの方法などなど・・。
どのブラウザにも対応させる方法ってあるんですね！

それから、cssの基本ソースでも基本的なソースが表示されていて
後は、赤い線の部分に自分の好きな設定を入れられる様になっていたので、これもとっても便利だと思いました。
私のサイトのcssやジャバスクリプトは、表示される表向きだけ気にしてソースそのものには、全く気をつけていなかったので
後から後からコピペで色々付け足したので専門家の方が見たら、唖然とされるソースになっているのかも・・・。（汗）

なので、今現在作っているサイトのＨＴＭＬに改良をして
出来るかどうか試して見ようと思います。

hanae662さん、ありがとうございます。

回答No.5

aqucent

多くのブラウザに対応するのは大変ですね。
以下に、私がWebサイトを作る上で気をつけていることをまとめてみます。

1. 「非推奨要素,属性」を使わないように

HTML&XHTML 非推奨となる要素と属性一覧/目次
http://www.scollabo.com/banban/dep/index.html

2. できるだけCSSを使う

スタイルシートデザインを始めたい方へ-WEB工房きくちゃん-
http://www.stylish-style.com/

3. ブラウザの特殊仕様を理解して、仕様差を埋めるコーディングを心がける

例えば、IEの "text-align:center" のバグは有名ですね。
http://www.mozilla.gr.jp/standards/webtips0004.html
Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/

4. 文法チェッカを利用する

Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
The W3C Markup Validation Service
http://validator.w3.org/
W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/

お礼

お返事おそくなってごめんなさい。
Webサイトを作る上で気をつけなければいけない事も
教えて下さってありがとうございます。
これからサイトを作る時にも参考になりそうです！

＞非推奨要素,属性
＞HTML&XHTML 非推奨となる要素と属性一覧/目次
そんなのもあったんですね～。初めて知りました。
参考ＵＲＬも拝見してみました。
センタリングやテーブルを私は良く使います。
でも、テーブルのｔｒやｔｄは非推奨ではないってあったので
ホ～ッとしました。
そう言えば、文字の指定をしているのに、指定された通りになっていなくて、他のブラウザで見た時に異常な文字の大きさになっていました。
その辺りも調整しないと・・・ですよね。
そそ、コピペで使用したジャバスクリプト？だったと思うんですけど、
それも別のブラウザでは機能していなかったです。（残念!!!）

＞2. できるだけCSSを使う
これ、検索エンジンにも関係があるって聞いた事があるので
なるべく使いたいと思ってはいるんですが・・・・。
曖昧な理解しか出来ていないのが現状なので、もっと深く理解
したいと思っています。

＞例えば、IEの "text-align:center" のバグは有名ですね。
え～、有名だったんですね。知りませんでした～（汗）
どうしてもセンタリングが出来ない所があって悩んでいたんです。
私、"text-align:center"これ、かなり苦戦していました。
それから、右よりに文字を移動させたいのにどうしても移動しなかった
事もあります。
多分、私の記述が間違っていたのかなぁ・・・って。

それから、ブラウザを選ばないWebサイトも紹介されていたので
これから先また役立ちそうです。嬉しいです。

＞4. 文法チェッカを利用する
これ、全て英語で説明されていて・・・・読めなくて・・。（汗）
翻訳機能を使って時間のある時にゆっくりと見てみたいと思います。

aqucentさん、非推奨要素　その他とっても参考になりました。
ありがとうございました。

補足

回答をありがとうございます。
時間が無いので、後日必ずお返事しますね。
じっくりと拝見したいと思っています。

回答No.3

345itati

Macでサイト作ってます。
動作確認はMac Safari、IE(Win&Mac)、Firefox(Win&Mac)、Netscape(Win&Mac)、Opera(Win&Mac)、Sleipnir(Win)、Camino(Mac)、Shiira(Mac)と個人やってる癖に色々入れてる者です^^;

取り合えずIEメインで作られてる方だと、知らずに「独自拡張」というIEが独自で使えるようにしたタグを色々使われる方がいて、それが問題になりますね。
音楽を鳴らす<bgsound>とか、文字や画像をスクロールさせる<marquee>等はIEと同じレンダリングエンジンを備えないブラウザでは無効です。
(<marquee>は便利なせいか、最新版の殆どのブラウザが対応してるけど・・・

#2さんの仰るように、IEの他にはFirefox、Netscape、Operaできちんと見られれば、Mac側のブラウザではおかしな表示になる事はまずありません。たまにクラッシュして驚きますけど・・・

HTMLの解説書やサイト等では、このタグはこのブラウザでは無効とか、うまく対応出来てないとか、きちんと説明してくれていますから、そういったものを参考にされてみては。
といっても実際に動作確認をしてみないと分らないものですけど。

お礼

お返事遅くなってごめんなさい。
345itatiさんは、Ｍａｃでされているんですね。
SleipnirやCaminoやShiiraって言うのもあるんですね。
個人でされていても凄いと思います。

＞取り合えずIEメインで作られてる方だと、知らずに「独自拡張」というIEが独自で使えるようにしたタグを色々使われる方がいて、それが問題になりますね。

そうなんです。
私はＩＥしか知らなかったので、多分ＩＥ独自のタグ？を思いっきり使って
綺麗だったから一人で喜んでいました・・・。（赤面）

それで早速、ＩＥ以外のFirefox、Netscape、Operaをインストールして
自分のサイトを確認してみました。
かなりショックでした。
ＭＩＤＩも少し変だったんですけど、画像がこれまた思いっきり
ずれにずれまくって・・・文字の上に画像がかぶっていました。

それから、marqueeも左右に動いてしまったり、全く動かないのも
ありました。

一番悲惨だったのが、沢山のリンク先と説明文が重なってめちゃめちゃです。

殆どが、同じずれ方をしていたので、とりあえずFirefoxで
動作確認をして調整をしてみようと思います。
それが、完成すれば他のも大丈夫なんですよね！
クラッシュってなんだろう????

頑張ってみます！
345itatiさんありがとうございました。

補足

回答をありがとうございます。
時間が無いので、後日必ずお返事しますね。
じっくりと拝見したいと思っています。

回答No.2

めとろいと（@naktak）

Firefoxをインストールし、InternetExplorerと共に動作確認。
WindowsOSでは他にOpera、Netscapeあたりも検証対象にした方が良いです。
Netscape6と7のように、バージョンによって挙動が違うブラウザもありますので、
動作保証レベルを決めた方が良いです。
あまり深い所まで行くと悩みそうですので、この際、MacOS、Linuxのブラウザは無視しましょう。

ブラウザ対応がWebプログラミングする上でいっちばん邪魔くさい事で、
仕事でも悩まされます・・・。

お礼

回答をありがとうございます。

まずは、Firefoxをインストールしないといけないんですね。
知りませんでした～。（汗）

他にOpera、Netscapeあたりも検証対象にした方が良いのですね。
わぁ・・とっても難しそうですね。。。（苦笑）
しかもバージョンによっても挙動が違うブラウザがあるって・・・
う～ん、かなり厳しいですけど、頑張ってみます。

＞ブラウザ対応がWebプログラミングする上でいっちばん邪魔くさい事＞で、仕事でも悩まされます・・・。

え~~~ちょっとまって、そんなに難しい事だったんですね。（汗）
私は、ＨＴＭＬを少し追加するだけの事だとばかり思っていたんです。
naktakさんは、凄いですね。お仕事でされていらっしゃるんですね！

難しそうだけど、私なりに出来る所まで頑張ってみます。
naktakさんありがとうございました。

回答No.1

noname#20377

作り直すことは出来なくはありませんが・・・

「根本的に勉強しなおして0から作り直す」くらいの覚悟が必要かもしれません。

そういった苦労をいとわないのであれば

http://kaz.topaz.ne.jp/well/www/isohtml/

等を読んでみてください

お礼

早速の回答をありがとうございます。

私、ちょっと簡単に考えていました。
０から勉強して作り直し・・・なんですね・・・（汗）
ＨＴＭＬタグを組みなおすのかなぁ～???
なんとなくレベル高そうですね。

himajin3500さんから教えて頂いたＵＲＬもじっくりと
読んでみますね。（理解できるか不安ですが・・・）
頑張ってみます。
himajin3500さんありがとうございました。