![]() |
|
||||||||
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
現時点(2001.7)で最もユーザが多い(?)と思われる有名どころのブラウザで画面表示の違いを確かめてみました。ブラウザによって、思わぬところで意図しない表示になっていることがあるので、「せめて2大ブラウザで表示確認をしよう!!」 をお勧めするページです。 |
・このページでは、Windows+下記ブラウザでの画面表示の違いを紹介しています。![]() ![]() Mac.については、未知の世界です。(Macユーザの方、ごめんなさい) ・各プラウザでの表示状態を(一部分を除いて)キャプチャ画像として取り込んで紹介しています。 ・同一バージョンのブラウザでも、出荷時期や設定によっては、また違った表示になるかもしれません。 |
■テキストのスクロール <MARQUEE> ・・・・ </MARQUEE> <MARQUEE>は、ページ中でテキストを左右にスクロールさせるタグです。時々、Webサイトのトップページで「ようこそ・・○○○のページへ・・・●△○▲◎・・・」なんて使用されているのを目にします。 ▼下の表示例は、横幅400pixelの範囲で赤いテキストをスクロールさせようとしたのですが・・・ ![]() ![]() |
||||
<MARQUEE WIDTH="400"> <FONT COLOR="red"> <B>Welcome to Family Page Hiroshima !!</B> .....とんがりコーナー,広島の名物と文化,きママなお話し,HomePage作成支援 </FONT> </MARQUEE> |
||||
|
||||
もう一つ<MARQUEE>の応用・・・ ▼BGCOLOR="red"でスクロールさせる領域の背景を赤色、<FONT COLOR="#FFFFFF">でテキストを白色に変更したのですが・・・ ![]() ![]() ・・・ということで、<MARQUEE>はI.E.専用のタグ。使うのやめておいた方がいいかも !? |
||||
<MARQUEE BGCOLOR="red" WIDTH="400"> <FONT COLOR="#FFFFFF"> <B>Welcome to Family Page Hiroshima !!</B> .....とんがりコーナー,広島の名物と文化,きママなお話し,HomePage作成支援 </FONT> </MARQUEE> |
||||
|
■テキストの点滅(ブリンク) <BLINK> ・・・・ </BLINK> <BLINK>は、テキストを点滅させるタグです。目がチカチカするので、嫌う人も多いかもしれません。 ▼下の表示例は、青色のテキストを点滅させようとしたのですが・・・ ![]() ![]() ・・・ということで、<BLINK>はN.C.専用のタグ。特に害はないので、使ってもいいけど・・・ |
||||
<BLINK> <FONT COLOR="blue"><B>Welcome to F-Page広島 !!</B></FONT> </BLINK> |
||||
|
■横罫線の色指定 <HR COLOR="色指定"> <HR>は、横罫線をひくタグです。オプション指定で、罫線の太さ(SIZE)・長さ(WIDTH)、そして色(COLOR)を指定することができるので、ちょっとした飾り罫にも使えそうです。 ▼下の表示例は、太さ4pixel・長さ200pixelの赤色罫線をひこうとしたのですが・・・ ![]() ![]() ・・・ということで、<HR>のCOLOR="色指定"はN.C.には通用しないオプション。色が付かないこともあるということは知って使いましょう !! |
||||
<HR SIZE="4" WIDTH="200" COLOR="#FF0000"> |
||||
|
■テーブル(表)枠線の色指定 <TABLE BORDERCOLOR="色指定"> <TABLE>タグのオプションBORDERCOLORで、テーブル(表)の枠線に色をつけることができます。ページの見栄えを良くする飾りの目的だと思いますが、あちこちのWebサイトでよく目にするような気がします。 ▼下の表示例、ソースを見るとゴチャゴチャとしていますが、2行1列のテーブルです。<TABLE>タグのオプション指定で枠線の色指定をしていますが・・・ ![]() ![]() ・・・ということで、前の<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> |
||||
|
■テーブル(表)のセル高さ指定 <TR HEIGHT="高さ"> ■テーブル(表)に背景画像を表示 <TABLE BACKGROUND="画像ファイル名"> テーブル(表)内の各セルの幅・高さを指定したい場合、<TR>または<TD>タグのオプションWIDTH, HEIGHTで指定できます。このテーブル関連のタグ・オプションの解釈はブラウザによって異なる場合があるので気を使うところです。特にテーブルを使ってレイアウトに応用する場合には注意が必要です。 ▼下の表示例、3行3列のテーブルです。セル内になにも入れないとセルがつぶれてしまうので、各セルに全角のスペースを入れています。ここでは、セルの高さを<TR HEIGHT="50">で指定しようと思ったのですが・・・ ※背景の愛犬写真は背景画像です。次の項で説明しますので、取り敢えずここでは無視して下さい。 ![]() ![]() ・・・ということで、<TR>タグ内でセル高さを指定するといったようなことはしないようにしよう !! やはり、各<TD>タグ内で指定するのが基本のようです。(次の項で修正しています) |
||||
<TABLE BACKGROUND="ron.jpg" BORDER="1" CELLSPACING="0" CELLPADDING="0"> <TR HEIGHT="50"> <TD WIDTH="50"> </TD> <TD WIDTH="50"> </TD> <TD WIDTH="50"> </TD> </TR> <TR HEIGHT="50"> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR HEIGHT="50"> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE> |
||||
|
||||
・・・ということで、テーブルの各セルの高さ指定は、<TD HEIGHT="50">に修正。 さて、次は、テーブルの背景画像・・・ ▼下の表示例、3行3列のテーブルで、<TABLE BACKGROUND="ron.jpg">で、テーブル全体に背景画像(写真)ron.jpgを表示させようとしたのですが・・・ ※背景画像は、テーブル全体のサイズにあわせた一枚の画像を使用しています。 ![]() ![]() ・・・ということで、N.C.では<TABLE BACKGROUND="画像ファイル名">は使えない。 どうしてもI.E.と同じように表示させたい場合、一個一個のセルサイズにあわせて画像を分割し、各々のセルで<TD BACKGROUND="画像ファイル名">と指定する必要がある。 |
||||
<TABLE BACKGROUND="ron.jpg" BORDER="1" CELLSPACING="0" CELLPADDING="0"> <TR> <TD WIDTH="50" HEIGHT="50"> </TD> <TD WIDTH="50"> </TD> <TD WIDTH="50"> </TD> </TR> <TR> <TD HEIGHT="50"> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD HEIGHT="50"> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE> |
||||
|
■テーブル全般 特にテーブル(表)用のタグは、ブラウザによって解釈が異なる場合が多々ありそうです。 私の経験では、I.E.は少々のことは許してくれる比較的寛容なヤツ、そしてN.C.はちょっと気難しいシビアなヤツ といった感じでしょうか? ▼下の表示例、当サイトFamily Page広島各コーナーのメニュー部分で、テーブルを駆使(?)して作成しています。当サイトは、基本的にはI.E.で表示確認しているのですが、試しにN.C.で表示させてみたところビックリ・・・ ※現在は、I.E.とN.C.で同じ表示になるように修正しています。 ![]() ![]() ・・・ということで、複雑なテーブルを使ったページ、テーブルを使って凝ったレイアウトにしたページを作成した場合には、必ずI.E. & N.C.両ブラウザで表示確認してからupしましょう !! |
||||
ちょっと長くなるので、ソースは省略 |
||||
|