lHTML スタイル 備考 '98. 4. 7

l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .スタイル .名前. _一覧_
 備考  スタイル  文字 ( 配置 )  縁取り枠  領域  浮動域  座標  シート    
予備知識  使用できる主タグ  日本語フォント  同じ表示  単位  色の指定  サイズ例

IE4.0 と Netscape の違い

T 予備知識
スタイルは、<B>( 太字 ) などのタグに、補助タグ STYLE を使って 各種の属性を付加できます。
( 例 )
<B STYLE="COLOR : BLUE;">青い太字</B>
<B STYLE="FONT-SIZE : 30PX;">大きい太字</B>
青い太字
大きい太字
B(太字) の部分は、I(イタリック), H4(見出し) などの他の既存タグを書くことができます。
<FONT>など補助タグ(SIZE= など) があるものは、補助タグも一緒に書くことができます。
既存のタグを使いたくない場合は、上記 B の代わりに SPAN を書きます。


T 併用できる主タグ

Netscape : スタイルは、全ての既存タグと併用できます。( と思います。)
ただし、ネストできない場合などもあります。

IExplore : <FONT> などとは組み合わせられません。
配置のスタイルは、配置用のHTMLタグと組み合わせて使用します。

配置用のHTMLタグとは、
DIV P CENTER PRE TABLE TR TD UL OL LI H1 H5 などです。
これらは、改行 または空行などにはさまれて、前後の内容と区切られるものです。
なお、TABLE タグに配置スタイルを使用した場合は、
表の内容ではなく、表自体の配置を指定したことになります。

これらは サンプルテキストには、<DIV> を使って書いてあります
それ以外の、<SPAN> を使って書いてあるものは、他のタグと併用できます。

これらは主に領域を指定するタグですから、実際上の不都合はありません。
IExplore のスタイルは、かなり複雑なネストも可能です。


T フォントの指定
IExplore : 日本語フォントも指定できます。
Netscape : 日本語フォントは指定できません。( と思います。)
日本語フォントを指定すると、そのスタイル全体が無効になります
日本語フォントの指定は、スタイルとは別に行います
<FONT FACE="Hu楷書体">
<SPAN STYLE="COLOR:Peru;">
モグラが壁を削りました
壁はなくなるでしょうか。

</SPAN>
</FONT>
Netscape では、ブラウザで設定しているフォントで表示されます。
IExplore では、この例では Hu楷書体 で表示されます。


T 両ブラウザで同じように表示するには
1.スタイルでは、日本語フォントを設定しません。
2.領域を指定するスタイルは、ネストしないようにします。( 対 Netscape )
3.IExplore が対応している主タグだけを使います。( 対 IExplore )
※ その他の違いについては、各項目に記述があります。

最後の手段 ・・・別々の表示にします。
 これは、表示を別にする 簡単な一例です。
<IFRAME WIDTH=0 HEIGHT=0>
<NOIFRAME>
 Netscape 用の表示内容。
</NOIFRAME>
</IFRAME>
← 表示ファイルを指定しない フローティングフレーム
← 未対応ブラウザ用の内容 ( 書く必要はありません。)
 IExplore には表示されません。
<LAYER></LAYER>
<NOLAYER>
 IExplore 用の表示内容。
</NOLAYER>
← 何も書かないレイヤ ( 書く必要はありません。)
← レイヤ未対応ブラウザ用の内容
 Netscape には表示されません。
例えば、IExplore ではスタイルを使った重ね表示を行い、
Netscape では レイヤを使って重ね表示を行います。


T 指定値の単位
IExplore では、単位を省略すると PX( 場合によっては EM ) になります。
Netscape では、単位の記述を省略すると、指定が無効になる場合があるようです。
 --- 以下は、パソコンの[フォントサイズ]設定に比例した大きさになります。 ---
CM : センチ
MM : ミリ
IN : インチ
PC : パイカ
PT : ピッチ
 --- 以下は、表示面( ウィンドウ、表など ) の大きさが基準です。 ---
%  : パーセント 表示面の大きさに対する%。( 幅や高さなど。)
  ただし、文字の大きさや行間隔を設定するときは、文字の大きさが基準。
 --- 以下は、その時の文字の大きさが基準です。 ---
EM : 全角文字1個分 [あ]=1EM ( FONT-SIZE で指定した大きさ )
EX : 半角文字1個分 [AA]=2EX ( 〃 の 1/2 の大きさ )
 --- 以下は、パソコンの[画面サイズ]設定だけで決まります。 ---
PX : ピクセル
以下は すべて同じ長さで表示されます。
上の四つは、パソコンの画面設定によって、どれかひとつだけが下の五つと同じ長さになります。
300PX ( カスタム 75% のとき )
400PX ( 小さいフォント 100% のとき )
500PX ( 大きいフォント 125% のとき )
600PX ( カスタムフォント 150% のとき )
  10.58 CM    2.54 CM
 105.9 MM    25.4 MM
  4.17 IN    1  IN
  25   PC    6  PC
 300  PT    72  PT
[画面サイズ]設定を変更すると、上記はそのままの比率で伸縮されます。
[フォントサイズ]設定を変更すると、
上の四つはそのままで、下の五つが一様に伸縮されます。

パソコンの画面は、0.数ミリの小さな点(ピクセル)で表示されています。
画面サイズ設定を変更すると、ピクセルの大きさが変わります。
1024×768 のとき . . . 1ピクセルは約 0.25mm で表示されます。( これは参考例です。)
800×600 のとき . . . 1ピクセルは約 0.3mm で表示されます。
600×480 のとき . . . 1ピクセルは約 0.4mm で表示されます。

フォントサイズの設定を変更すると、ひとつの文字を何ピクセルで表示するのかが変わります。
また、1CM や 1IN を何ピクセルで表示するのかも変わります。
基準になっているのは、画面サイズ 1024×768、フォントサイズ 100% のときです。
このときに、1CM = 1センチメートル で表示されます。
もし画面サイズだけを 800×600 にすると、1個のピクセルが大ききくなるので、
 1CM = 1.33 センチメートル で表示されます。
フォントサイズを 75% にして、ICM のピクセル数を 75% に減らせば、
 1CM = 1センチメートル で表示されます。

スタイルでフォントサイズを指定したとき。
PX(ピクセル)で指定した大きさは、パソコンの画面サイズ設定だけに影響されます。
CM や IN などで指定すると、パソコンのフォントサイズ設定にも影響されます。
Netscape は、Ctrl + ] , Ctrl + [ でフォントサイズを変更できます
 PX 以外でサイズを指定した部分のみ、ブラウザで大きさを変えられます。

HTML タグでは、TABLE(表) の大きさなどの指定単位は ピクセルです。
このような場合に スタイルを使って正確な配置を必要とするときには、
スタイルでも ピクセルを使って指定します。
( 例えば、フォントサイズ 200% の設定のパソコンで見ても 表からはみ出さないため。)

参考 : ピクセル ...画面に表示されている文字の、最小表示単位。
ABC
← ABC を拡大してみると、このようになっています。
  Windows95 の System フォント。
  小さなひとつの点 の部分がピクセルです。
[画面のプロパティ]で 画面サイズ を変更すると、ピクセルの大きさが変わります。
[画面のプロパティ]を変更するには ( Windows95 )
 画面を右クリックします。→ ポップアップメニューが表示されます。
 [プロパティ]を選択します。→ [画面のプロパティ]ダイアログが表示されます。

メモ  ピクセルは表示の最小単位ですから、小数の指定はできません。( と思います。)
  文字の大きさを PX で指定しても、IExplore と Netscape では異なる表示になります。
  Netscape は、IExplore と同じ行間で、やや小さな文字になります。


T 色の指定について
Netscape では、背景色の指定が無効になる場合があります。

以下の例は、画像ファイルを指定しなかった場合です。
BACKGROUND-COLOR: を使うか、画像ファイルを指定すれば、ちゃんと着色されます。

---以下は、IExplore では きちんと着色されています。---
<SPAN STYLE="BACKGROUND:WHITE;"> 着色されません </SPAN><BR>
<SPAN STYLE="BACKGROUND:RGB(255,255,255);"> 着色されません </SPAN><BR>
<SPAN STYLE="BACKGROUND:F0F0F0;"> 着色されません </SPAN><BR>
<SPAN STYLE="BACKGROUND:000000;"> 着色されません </SPAN><BR>
※ 指定色の前後関係によっても、着色される場合とされない場合があります。

着色されるようにするには、
1.16進数指定の場合は、# を付けます。( 一部の色だけは省略できます。)
2.FFFFFF, F0F0F0 などの 純灰色を指定しません。→ FFFFFE, F0F0F1
3.十進数で指定します。( 純灰色以外。)
 BACKGROUND:FFFF00; → BACKGROUND:RGB(255,255,0); 

文字の場合でも、背景と同じ色を指定すると色が変わることがあります。
( 見えない文字のつもりでも、Netscape では見えてしまう。)

ゲーム性を持たせるため なのかも知れませんが、. . . . . . . . . . . . . . . . . . . 。


T フォントサイズのサンプル
メモ : Netscape では、0PX, 1PX, OPT は無視される。( 普通の大きさに戻る。)
  [フォントサイズ]は参考例です。 . . . 800×600 125% 15inch
  IExplore のフォントサイズが中のときの <FONT SIZE>1〜7 の大きさ。

 PX FONT SIZE [ 1 2 3 4 5 6 7 ]
00  11  22  33  44  55  66  77  88  99  1010  11  12  [13] 14 15 [16]  19 [20] 21 [22] 23 
29 [30] 31  39 [40] 41  59 [60] 61
 ※ <FONT SIZE=4> と <SPAN STYLE="FONT-SIZE:22PX;"> は、同じ大きさ。



 PT FONT SIZE [ 1 2 3 4 5 6 7 ]
00  11  22  33  44  55  66  77  8[8]  99  [10]  11 [12] 13 [14] 15 16 17 [18]
19  23 [24] 25  35 [36] 37


T

  mtoga@sannet.ne.jp   登録日 '96. 6.15
URL : http://www.page.sannet.ne.jp/mtoga/index.html