とあるウェブサイトを作成しています。

作成に当たり、ブラウジング結果のチェックをFirefox1.5で行っているのですが、現状では、IE6.0との差異がかなり大きくなってしまっています。

目標は、Firefox1.5での見栄えと、IE6.0の見栄えを同じくしたいのですが、Firefox1.5向けに書いたhtml(とcss)を、IE6.0でも同じ見栄えになるように変換してくれるツールがあったら教えてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/06/30 01:29:36
  • 終了:2006/07/02 00:51:37

回答(3件)

id:tori_toi No.1

tori_toi回答回数22ベストアンサー獲得回数32006/06/30 03:26:00

ポイント27pt

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

・もしかしたらご存じかもしれませんが”HTML文書の文法をチェックし、採点する”サイトです。

xhtml+css や htmlでサイトを構築する際に、こちらでそこそこの点数(100点は狙わないでも大丈夫です)が取れれば、

ブラウザでの見え方もある程度定まると思います。

・Dreamweaverを使用しているならば、 

コマンド → ソースフォーマットの適用

でソースをクリンナップしてくれます。(かなりのエラーを減らす事が出来ます)

「ブラウザの対応をチェック」機能を使えば、そのブラウザでは使えないタグ、などが出てくるので対処が出来ると思います。

・もしオールCSSでサイトデザインをしている場合すべてをdivタグでレイアウトを組むのは至難の業ですし、

IEはこの面が弱いので思い切って大雑把なレイアウトにはテーブルタグを使い、

その中にdivタグで割っていく、と言うのも手だと思います。

・また、現在のwebブラウザ利用割合ではIEが80%、firefoxが5%、safariが3%程度と言う事なので、

やはりIEでの見え方をメインに組んでいった方が

「多くの人に見てもらう」 ことを前提にサイトを制作している場合

その方が効率がよいかもしれません…

(私的にもfirefoxやoperaなどが好きなのですが;)

長々とお邪魔しました。

id:kazu1107 No.2

kazu1107回答回数199ベストアンサー獲得回数142006/06/30 03:45:50

ポイント27pt

ハッキリ言ってそのようなツールは無いと思います。(同じだと判断するのが最終的に人間なので、ビジュアル的に判断というのが難しい)

特にIEにはmarginとfloatを組み合わせて使ったときにレイアウト決めのバグが出たりもするので、最終的には1px単位での調整が必要になります。

本当は最初レイアウトを決めるとき、その段階でmarginとfloatのバグ対策をしておき、あとは中身を組み立てていくだけ・・・という形にするのが一番楽なんだと思いますが、そうも言えないようですね。。。


サイトを見ないと具体的なアドバイスは出来ませんが、ブラウザ間の違いはよく、floatやmarginを使ってるところあたりに現れます。

それと、h1~6タグやdivタグ、pタグといったブロック型タグのmarginなども0なら0pxで指定することでうまくいくこともあります。

結局コツと根気がいる作業ですが・・・。


面倒だったらJavaScriptやCSSハックなどを利用し、ブラウザごとにCSSファイルを変えてしまうというのも一つの手です。


http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm

http://east.portland.ne.jp/~sigekazu/css/javascript.htm

id:aratako0 No.3

あらた回答回数34ベストアンサー獲得回数12006/06/30 10:31:45

ポイント26pt

そういったツールはないように思います。

もし完全に各ブラウザ間のデザインを統一するなら、それこそfireworksやphotoshopでデザインして、その上でスライスしてしまうとか。(完全にtableばかりになってしまいますけれど)

もしくは、全ページをFlashで構築するとか。。。

ただ、XHTML+CSSのWeb標準的な方法でブラウザ間の互換性を保つなら、CSS hack的な技を使うしかないと思います。

参考文献だけ紹介しておきます。

世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル (Web Designing Books)

世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル (Web Designing Books)

  • 作者: 大藤 幹
  • 出版社/メーカー: 毎日コミュニケーションズ
  • メディア: 単行本

速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)

速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)

  • 作者: 河内 正紀
  • 出版社/メーカー: 技術評論社
  • メディア: 大型本

このへんが新しい文献で参考になるかなと。

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません