- ベストアンサー
IEと、他ブラウザの表示がうまく合いません
Dreamweaver CS3、macにてHPを制作中なのですが、safariやクローム、オペラで確認する表示と、 IEで確認する表示が異なり、困っています。 文字詰めやフォントもそうなのですが、IEで表示するとサイドのメニューバーの高さがページによって変わってしまう（広がる）ことに一番困っています。（メニューを選択した際、右側に表示される内容が多くスクロールが発生する場合） テーブル設定の問題？とも思ったのですが、IEだけなので困っています。 文章での説明分かりづらいかもしれませんが、この現象を回避できる方法をお教え頂ければ幸いです！どうぞよろしくお願いします。
- mohuneco3
- お礼率10% (6/60)
- ホームページ作成ソフト
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
DreamWeaberでそのようなページできないはずですが・・・ IEで表示が大きく異なる原因は、互換モードで動作することが最大の要因になる事が多いです。 IEの互換モードは、他のブラウザを駆逐するためにのかって第一次ブラウザ戦争( http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E6%88%A6%E4%BA%89#.E7.AC.AC.E4.B8.80.E6.AC.A1.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E6.88.A6.E4.BA.89 )の名残で、ＩＥは斬新な独自仕様を取り入れてＯＳと抱き合わせで頒布して他のブラウザを駆逐してしまいました。ブラウザによるOS不要を目指したNetscapeを危険と判断したのです。--結果的にその時代は来てしまいましたが-- 『互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』と危惧を抱いたW3Cなどによって、『どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』としてウェブ標準が提唱され、多くのブラウザがそれに従う中、ＩＥ勝手の独自仕様で作られたサイトへの対応から、ウェブ標準への対応が大きく遅れました。また、そのようなサイトを利用するために互換モードを持っています。 ★ここまではウェブ開発者は知っておくべき--リンク先を読んでおくこと。 ＩＥを標準モードで動作させるためにはDOCTYPEスイッチを正しく記述する必要があります。DreamWeaberCS3は古いためデフォルトが異なりますので修正する必要があります。 DOCTYE宣言を HTML4.01Transitionalでしたら、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML4.01Strictでしたら、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> と記述することで、他のブラウザと合うはずです。 ⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) なお、 ＞文字詰めやフォントもそうなのですが、IEで表示するとサイドのメニューバーの高さがページによって変わってしまう（広がる）ことに一番困っています。 それ以前の問題も含んでいます。 そもそも『HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』のですから、スマホのような小さな画面でも、視覚障害者がフォントやそのサイズを指定しても、利用しづらくなったらダメなのです。 リキッドで表示幅を小さくしてもスクロールが必要になったりはまずいのです。 HTML5を目前にした状況では、HTML4.01strictで作成しましょう。
その他の回答 (1)
- dragon-man
- ベストアンサー率19% (2711/13692)
ブラウザはHTML+CSSの文法に沿って解釈、表示するソフトです。解釈の仕方（表示の仕方）はブラウザによって幾分異なります。文字フォントはweb側が特定のものを指定してなければ、ブラウザの標準フォントが使われます。Windowsの場合、おそらくMSPゴシックが使われるでしょう。Macの場合は知りません。その表示の仕方（行間、フォント、文字詰めなど）はブラウザによって多少異なります。どれがいいかは好き好きです。ブラウザによって違いが起きないようにするには、webデザインの際フォントを特定のものを指定するべきです。私はメイリオを使っています。今はWindows,Macとも普及しているはずです。 web表示画面以外のメニューバーやタスクバーはHTML文法と無関係です。ブラウザ製造者が自由にデザインでき、ブラウザごとに異なります。これも好き好きです。表示の仕方もオプションなどで変えられるものが多いです。それがブラウザごとに（IEだけが）違うのが気に入らなければ、IEを使わなければいいだけのことです。 「メニューを選択した際、右側に表示される内容が多くスクロールが発生する場合」という意味がいまいちよく分かりませんが、スクロールが発生しないように表示ウィンドウ（Macでは何というのか？）を十分に広げればいいだけのことでしょう。そのもとになるモニタ画面のサイズはいろいろですから、web作成者はそれに見合った大きさにデザインすべきです。出来たら１５インチ程度の小さなモニタを想定して、（少なくとも横方向の）スクロールが発生しないサイズにwebデザインするべきです。そうしないと小さなモニタを使っている人は見づらいので見てくれないでしょう。 ちなみに上部のメニューバーやタスクバーの面積（上下幅）をいちばん小さくできるのはIEだと思っています。
補足
ご回答ありがとうございます。 「メニューを選択した際、右側に表示される内容が多くスクロールが発生する場合」 分かりづらくてすみません。 メニューとは左側に表示する ・ホーム ・会社情報 ・採用情報 などの事で、それらをクリックしたとき右側に内容が表示されるようにしたいのです。 しかし、「会社情報」が長くなり、下へのスクロールが発生すると、左側のメニュー ・ホーム ・会社情報 ・採用情報 の行間（高さ）にばらつきが発生してしまうのです。 それがブラウザごとに（IEだけが）違うのが気に入らなければ、IEを使わなければいいだけのことです。 自分はmacなのですが、やはりwindows、IEを使用する人の方が多いと思うので、それを想定してページを作成したいのです。 他のサイトはsafariで見てもIEで見ても大差ないので、自分の作り方が悪いのだと思うのですが、 初心者故うまくいかない状況です。