Microsoft vs. Netscape ～ブラウザによる表示の違い～

ＨＰ立ち上げガイド　

検索エンジン攻略法　

Yahoo! JAPAN登録効果や如何に!?　

ブラウザによる表示の違い
　　

アクセスアップ・・あの手この手　

ＨＰ作成支援　

超簡単ＨＴＭＬ基礎　

画像関連ヒント＆トピックス

Microsoft vs. Netscape
～ブラウザによる表示の違い～

現時点(2001.7)で最もユーザが多い(?)と思われる有名どころのブラウザで画面表示の違いを確かめてみました。ブラウザによって、思わぬところで意図しない表示になっていることがあるので、「せめて2大ブラウザで表示確認をしよう!!」をお勧めするページです。

・このページでは、Windows＋下記ブラウザでの画面表示の違いを紹介しています。
　

I.E.(Microsoft Internet Explorer 5.0 & 5.5)　

N.C.(Netscape Communicator 4.6 & 4.75)
　Mac.については、未知の世界です。(Macユーザの方、ごめんなさい)
・各プラウザでの表示状態を（一部分を除いて）キャプチャ画像として取り込んで紹介しています。
・同一バージョンのブラウザでも、出荷時期や設定によっては、また違った表示になるかもしれません。

■テキストのスクロール　<MARQUEE> ・・・・ </MARQUEE>

<MARQUEE>は、ページ中でテキストを左右にスクロールさせるタグです。時々、Webサイトのトップページで「ようこそ・・○○○のページへ・・・●△○▲◎・・・」なんて使用されているのを目にします。

▼下の表示例は、横幅400pixelの範囲で赤いテキストをスクロールさせようとしたのですが・・・

I.E.・・・問題なく表示されます。

N.C.・・・完全にタグを無視されているようです。但し、タグ内のテキストは、通常のテキストとして表示されるので、長いテキストを使用するとWindow横幅一杯に表示されることに・・・。

<MARQUEE WIDTH="400">
<FONT COLOR="red">
<B>Welcome to Family Page Hiroshima !!</B>　.....とんがりコーナー，広島の名物と文化，きママなお話し，HomePage作成支援
</FONT>
</MARQUEE>

Microsoft Internet Explorer 5.0 & 5.5

←←左方向に向かってテキストがスクロールする．
（注：キャプチャ画像なのでスクロールしてませんが、実際I.E.表示ではスクロールします）

Netscape Communicator 4.6 & 4.75

Welcome to Family Page Hiroshima !!　.....とんがりコーナー，広島の名物と文化，きママなお話し，HomePage作成支援
　Windowの幅いっぱいにテキストが・・・　勿論、テキストは止まったまま！

もう一つ<MARQUEE>の応用・・・

▼BGCOLOR="red"でスクロールさせる領域の背景を赤色、<FONT COLOR="#FFFFFF">でテキストを白色に変更したのですが・・・

I.E.・・・問題なく表示されます。ん～、いい感じ !?

N.C.・・・何も表示されずに、空白のスペースだけが・・・。実は、白色のテキストが並んでいるのですが、背景が白色なので見えない。

　・・・ということで、<MARQUEE>はI.E.専用のタグ。使うのやめておいた方がいいかも !?

<MARQUEE BGCOLOR="red" WIDTH="400">
<FONT COLOR="#FFFFFF">
<B>Welcome to Family Page Hiroshima !!</B>　.....とんがりコーナー，広島の名物と文化，きママなお話し，HomePage作成支援
</FONT>
</MARQUEE>

Microsoft Internet Explorer 5.0 & 5.5

←←左方向に向かってテキストがスクロールする．
（注：キャプチャ画像なのでスクロールしてませんが、実際I.E.表示ではスクロールします）

Netscape Communicator 4.6 & 4.75

Welcome to Family Page Hiroshima !!　.....とんがりコーナー，広島の名物と文化，きママなお話し，HomePage作成支援
　何も表示されずに、スペースだけが・・・　実は白色のテキストが並んでる

■テキストの点滅（ブリンク）　<BLINK> ・・・・ </BLINK>

<BLINK>は、テキストを点滅させるタグです。目がチカチカするので、嫌う人も多いかもしれません。

▼下の表示例は、青色のテキストを点滅させようとしたのですが・・・

I.E.・・・タグを無視されているようで、単なる普通のテキスト状態。（点滅しません）

N.C.・・・問題無し。狙い通り、テキストが点滅します。

　・・・ということで、<BLINK>はN.C.専用のタグ。特に害はないので、使ってもいいけど・・・

<BLINK>
<FONT COLOR="blue"><B>Welcome to F-Page広島 !!</B></FONT>
</BLINK>

Microsoft Internet Explorer 5.0 & 5.5	Netscape Communicator 4.6 & 4.75
単なる普通のテキスト	点滅を繰り返すテキスト（注：キャプチャ画像なので点滅してませんが、実際N.C.表示では点滅）

■横罫線の色指定　<HR COLOR="色指定">

<HR>は、横罫線をひくタグです。オプション指定で、罫線の太さ(SIZE)・長さ(WIDTH)、そして色(COLOR)を指定することができるので、ちょっとした飾り罫にも使えそうです。

▼下の表示例は、太さ4pixel・長さ200pixelの赤色罫線をひこうとしたのですが・・・

I.E.・・・問題なく指定通りに表示されます。

N.C.・・・COLOR="色指定"のオプションは無視されるようで、背景色(白)と同じ色の罫線になってしまいました。背景色によっては、予想もしない変な色になることもあるような・・・。

　・・・ということで、<HR>のCOLOR="色指定"はN.C.には通用しないオプション。色が付かないこともあるということは知って使いましょう !!

Microsoft Internet Explorer 5.0 & 5.5	Netscape Communicator 4.6 & 4.75

■テーブル（表）枠線の色指定　<TABLE BORDERCOLOR="色指定">

<TABLE>タグのオプションBORDERCOLORで、テーブル（表）の枠線に色をつけることができます。ページの見栄えを良くする飾りの目的だと思いますが、あちこちのWebサイトでよく目にするような気がします。

▼下の表示例、ソースを見るとゴチャゴチャとしていますが、2行1列のテーブルです。<TABLE>タグのオプション指定で枠線の色指定をしていますが・・・

I.E.・・・問題無く表示されます。

N.C.・・・BORDERCOLOR="色指定"のオプションは無視されるようで、グレーの枠線になってしまった。

　・・・ということで、前の<HR>同様、<TABLE>タグのオプションBORDERCOLOR="色指定"はN.C.には通用しないオプション。色が付かないことも覚悟の上で使いましょう !!

<TABLE WIDTH="200" BGCOLOR="#9999FF" BORDER="1" CELLSPACING="0" BORDERCOLOR="#9999FF">
<TR>
　　<TD><FONT SIZE="2" COLOR="#FFFFFF">　<B>Web親父ギャグ</B></FONT></TD>
</TR>
<TR BGCOLOR="#FFFFFF">
　　<TD><FONT SIZE="2" COLOR="#3333FF">　1.リンクが切れた<BR>　2.軽～いノリのページ<BR>　3.重～いページ</FONT></TD>
</TR>
</TABLE>

Microsoft Internet Explorer 5.0 & 5.5	Netscape Communicator 4.6 & 4.75

■テーブル（表）のセル高さ指定　<TR HEIGHT="高さ">
■テーブル（表）に背景画像を表示　<TABLE BACKGROUND="画像ファイル名">

テーブル（表）内の各セルの幅・高さを指定したい場合、<TR>または<TD>タグのオプションWIDTH, HEIGHTで指定できます。このテーブル関連のタグ・オプションの解釈はブラウザによって異なる場合があるので気を使うところです。特にテーブルを使ってレイアウトに応用する場合には注意が必要です。

▼下の表示例、3行3列のテーブルです。セル内になにも入れないとセルがつぶれてしまうので、各セルに全角のスペースを入れています。ここでは、セルの高さを<TR HEIGHT="50">で指定しようと思ったのですが・・・
※背景の愛犬写真は背景画像です。次の項で説明しますので、取り敢えずここでは無視して下さい。

I.E.・・・問題無く表示。各セルの高さは50pixelになっています。

N.C.・・・なんと、<TR>タグ内のHEIGHT="50"は無視されてしまったようです。セル内の全角スペースの高さになってしまったようです。

　・・・ということで、<TR>タグ内でセル高さを指定するといったようなことはしないようにしよう !!　やはり、各<TD>タグ内で指定するのが基本のようです。（次の項で修正しています）

Microsoft Internet Explorer 5.0 & 5.5	Netscape Communicator 4.6 & 4.75

・・・ということで、テーブルの各セルの高さ指定は、<TD HEIGHT="50">に修正。
さて、次は、テーブルの背景画像・・・

▼下の表示例、3行3列のテーブルで、<TABLE BACKGROUND="ron.jpg">で、テーブル全体に背景画像（写真）ron.jpgを表示させようとしたのですが・・・
※背景画像は、テーブル全体のサイズにあわせた一枚の画像を使用しています。

I.E.・・・思った通りに背景画像が表示・・　問題なし。

N.C.・・・背景画像がうまく表示されない。画像（写真）の左上の部分が各セルに繰り返して表示される。

　・・・ということで、N.C.では<TABLE BACKGROUND="画像ファイル名">は使えない。
どうしてもI.E.と同じように表示させたい場合、一個一個のセルサイズにあわせて画像を分割し、各々のセルで<TD BACKGROUND="画像ファイル名">と指定する必要がある。

Microsoft Internet Explorer 5.0 & 5.5	Netscape Communicator 4.6 & 4.75

■テーブル全般

特にテーブル（表）用のタグは、ブラウザによって解釈が異なる場合が多々ありそうです。
私の経験では、I.E.は少々のことは許してくれる比較的寛容なヤツ、そしてN.C.はちょっと気難しいシビアなヤツ　といった感じでしょうか？

▼下の表示例、当サイトFamily Page広島各コーナーのメニュー部分で、テーブルを駆使(?)して作成しています。当サイトは、基本的にはI.E.で表示確認しているのですが、試しにN.C.で表示させてみたところビックリ・・・
※現在は、I.E.とN.C.で同じ表示になるように修正しています。

I.E.・・・思った通りに表示。（元々、こんな風に表示させたかった）

N.C.・・・何故か、各コーナーへリンクしているタブ部分が歯抜け状態で、間抜けな感じになってしまった。未だに何が悪かったのか、その原因を解明できていない・・・。(^_^;

　・・・ということで、複雑なテーブルを使ったページ、テーブルを使って凝ったレイアウトにしたページを作成した場合には、必ずI.E. & N.C.両ブラウザで表示確認してからupしましょう !!

ちょっと長くなるので、ソースは省略

Microsoft Internet Explorer 5.0 & 5.5

元々、こんな風にしたかった．

Netscape Communicator 4.6 & 4.75

[教訓] せめて2大ブラウザ I.E. & N.C.で表示確認しよう !!