人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: showtarow
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS HTML IE6 とある ウェブサイト
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● tori_toi
●27ポイント

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などが好きなのですが;)

長々とお邪魔しました。


2 ● kazu1107
●27ポイント

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

特に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


3 ● あらた
●26ポイント

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

もし完全に各ブラウザ間のデザインを統一するなら、それこそ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)

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ