■キー割当表示 [Shift-H] ─ KeyNavi:キーボードを活用して 
ホームページを快適に─
 
ホーム [0] HTML,CSSバグ&回避法リスト:1.目次 [1] 6. その他・総合 ・サイトマップ [Shift-S]

HTML,CSSバグ&回避法リスト
 ■ 6. その他・総合

【このページ内のトピック: 「Ctrl-矢印」でフォーカス移動・「G/T」連打で自動ナビ】
6.1 ブラウザによって文字サイズ・行間・フォントが相違
6.2 文字サイズ変更の可否が不統一
6.3 XHTMLのページを表示できない(MacIE4.5)
6.4 指定外部ファイル(CSS,JS)が存在しないとページが表示されない(NS4)

注1: 「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。
注2: ブラウザ名で特に指定が無いものはWindows版についての記述です。
注3: スタイルシートについては、特に断りの無い限り互換モードについての記述です。

 ■ 6.1 ブラウザによって文字サイズ・行間・フォントが相違

デフォルトでのテキストの違い
ブラウザの種類や使っているOS(Windows,Mac,Unixなど)によって デフォルトの文字サイズが異なります。 WindowsではNetscape4.xのデフォルトの文字サイズは IE3+,NS6+,Operaに比べて小さいです。

同じブラウザでもMac版IE,NSではWindows版に比べて文字が小さく その分行間、文字間隔が広いです。

フォントについては NS6,Opera6,7(英語版)では明朝系、 IE,NS4,NS7,Opera6(日本語版)はゴシック系となっています。

文字サイズ指定時の違い
また文字サイズとして同じ値を指定しても ブラウザによって異なった大きさになります。
NS4ではfontタグの「size」による指定が一回り小さい。
先に述べたようにデフォルトのフォントサイズ(size=3)が小さい。
「medium」を指定した場合IE4+,NS4,Operaではデフォルトの文字サイズより大きい。
これらのブラウザではデフォルト文字サイズは「small」と一致。
IEで確認して小さめ文字にx-smallを使うとNS6ではかなり小さくなるので注意。
基本的にMacでは72dpi、Windows版では96dpiであるため 「pt,pc,in,cm,mm」によって指定した大きさが両者で3:4で異なる。
1[pc]=12[pt]=1/6[in]=0.423[cm]=4.23[mm]
新しいブラウザ(Mac版IE5,NS6など)はデフォルトで96dpiらしいので この内容は当てはまらないかもしれません。
「100%」を指定した場合 NS4,Opera6ではデフォルトの文字サイズより若干小さい。
「em,ex」を使った場合 IE3.0では字がとても小さくなり判読不可能に。
各種フォントサイズとブラウザ互換性
各ブラウザで表示される文字サイズを揃えたい
ユーザが使用するブラウザに関わらず同じ大きさでテキストを表示するには
スタイルシートで文字サイズをピクセル値[px]で与える。
次の項で述べますがIEで文字サイズの変更が難しくなり 視力の弱い人にとって不便になる可能性があります。
ブラウザ別にカスタマイズしたスタイルシートを用意して 各々に適切な文字サイズを指定する。
CGI, JavaScript, 条件付コメント,ブラウザのバグを逆手に取る方法 などでブラウザ別に適用します(5. ブラウザ別にスタイルシートを指定 参照)。

 ■ 6.2 文字サイズ変更の可否が不統一

文字サイズに同じ指定をしても 拡大縮小できるかがブラウザ毎に異なります。 例えば IE6ではブラウザのメニューから 「表示」→「文字のサイズ」→「最大,大,中,小,最小」 として文字のサイズを変更できます。 このときページ内で「px」や「pt」などでフォントサイズを指定されたテキストは 大きさが変わりません。それに対しNS6+ではそれらも拡大縮小されます。

各種フォントサイズとブラウザ互換性

上のページの要点を抜粋すると
文字サイズを固定するにはピクセル値[px]を使う。
NS4では[px]以外は全て可変。NS6+では[px]も含め全てで可変。
Operaでは単位に関わらずそのまま拡大縮小可能。
NS6+でも固定するはテキストの代わりに画像を使う。
文字サイズを可変にするにはsize,キーワード(small等),パーセント,[em],[ex]を使用。
small,medium,largeなどのキーワードによる指定は IE4+,NS4,Operaではデフォルトより大きめになる。
em,exによる指定はIE3.0では文字が小さくなる。 またIE5+ではサイズ変更時に大きさが急激に変化する。

ユーザによる文字サイズの変更について
ユーザが文字サイズを変更した場合には デザイナーが作ったレイアウトがずれる可能性があります。 例えば 文字数の多い英単語やURLがボックスに含まれる場合、 拡大によってボックスの幅が押し広げられる可能性があります。

NS6+以外では 文字サイズを[px]で与えればこの問題を回避できます。 レイアウトを崩したくない場所では[px]を使ったり 或いは画像でテキストを表現してもいいでしょう。

逆にユーザ側としては文字が小さすぎるとページが読みにくい場合があります。 例えば本文など重要な部分が[px]で固定されていて 拡大できないと視力の弱い人にはページの内容を把握できないかもしれません。 またモバイル機器など ディスプレイが小さくて且つ高解像度なものを 使用する場合にも見かけ上の文字サイズが小さくなり読みにくいでしょう。

単なる装飾的なものではなく内容の理解に欠かせない部分については パーセントやfontタグのsizeによって文字サイズを与えておき ユーザの好みに応じてサイズを変えられるようにしておくといいでしょう。

IE6で[px]で固定された文字サイズを変更したい場合は 「ツール」→「インターネットオプション」→「ユーザ補助」→「Web頁で指定されたフォントサイズを使用しない」 などとすれば可能です。
(このときh1〜h6タグで指定したもの以外は全て同じサイズになる模様)
しかし視力の弱いユーザにここまでしてもらうのは難しいです。

蛇足ですが ユーザによる文字サイズの変更は画像には適用されません。 画像も含めて拡大したい場合には ユーザにOperaを使ってもらうといいかも知れません。

IE5.5+では スタイルシートで<body>に対しzoom指定をすると ページの内容全体(画像、固定サイズテキスト含む)が拡大できます。 JavaScriptでは「document.body.style.zoom=2.0」などとできます。 それを生かしてページに拡大縮小ボタンを用意してもいいでしょう。

 ■ 6.3 XHTMLのページを表示できない(MacIE4.5)

XHTMLはXMLでもあるのでファイルの先頭に XML宣言「<?xml version="1.0" encoding="Shift_JIS"?>」を置きます。 しかし これがあるとMacIE4.5では HTMLではなく単なるテキストとして表示するそうです。

Googleで「MacIE4.5、XHTML、バグ」検索

また、IE3,NS3ではXML宣言がそのままページの先頭に表示されてしまいます。

NS6+ではスタイルシートのモードが「標準モード」になるのに対し WinIE4-6では 「互換モード」になります。 もしXHTMLのページで「標準モード」にしたい場合はやむを得ず XML宣言を省く必要があります (XML的には冒頭に宣言があるのが普通です)。

またXHTMLでは 条件分岐コメント(Conditonal Comments)の <![if lt IE 5]> ... <![endif]>といった用法(Downlevel-revealed)、 formタグの前後の空白を除去するために tableタグと組合わせる方法 がXHTML非対応です。XMLのパースの段階で引っかかってしまいます(非整型)。

上記内容をXHTMLで書いたページ
http://validator.w3.org (←上のページがXHTML対応かどうか検証できます)

IE5.5,6.0では XML宣言とDOCTYPE宣言、HTML要素の間に 長いコメント(60文字以上程度)があると ページをHTMLとしてレンダリングせず ソースをそのままXMLツリーとして表示してしまいます。

DOCTYPE宣言をコピー&コメントした時に簡単に発生してしまうので注意します。 この現象が起こる場合は通常のページと異なり 表示までに結構時間がかかりますが文法チェックが厳しくなります。
→これを逆手にとってXHTMLの文法チェックに利用してもいいかも。

その他にも 細かい文法規則のために ファイルサイズが増えたり、手打ちコーディングの場合は メンテナンスが大変になるなどの問題があります。

ページの構成がW3C文書のように固定的な場合はXHTMLを適用しやすいです。 しかし一般のページでは 画像やテーブルの多用など見栄え上の工夫、 各種ブラウザバグ対策などでソースが複雑になります。 結果として例外処理が増える為 プログラムで処理しにくくなります。

XMLによるデータ処理をしたい場合、XHTMLを直接記述せず プログラムで変換出力することにします。そして元のデータをXMLで書きます。 処理にはHTMLではなく 変換元のキレイなXMLを使うのが合理的です。

Webページ全体を作成するのに XMLを使うと開発&維持コストがとても大きくなることがあります。 XSLTの利用で見られるように XMLによる開発では変換元データ、変換プログラムが冗長・複雑になる傾向があります。

そもそもXML自体、細かい規則が多く 直接入力には不向きです。 別のインタフェースで被せたほうがいいでしょう。 他の言語や独自形式を採用するのも現実的です。 XMLが必要な場合は元データからXMLを変換出力します。

 ■ 6.4 指定外部ファイル(CSS,JS)が存在しないとページが表示されない(NS4)

NS4ではHTML内で指定したスタイルシートやJavaScriptの外部ファイル が存在しないと そのページ自体が表示されません。 詳しく言うと 該当ページ(Aとする)を一瞬表示した後に 存在しないファイル(Bとする)のURLがアドレスバーに設定され ブラウザのウィンドウには「Not Found」と表示されます。

実験:指定CSSファイルがないページ
実験:指定JSファイルがないページ

その「Not Found」の状態から前のページに戻るのも少し面倒です。 というのも「戻る」ボタンを一度押すと BからAに戻り、またすぐにBとなって 再度「Not Found」が表示されます。 前のページに戻るには「戻る」ボタンを2回連続で素早く押すか 履歴を表示させて戻る必要があります。

致命的なバグになるので 外部ファイルのすっぽ抜けには注意しましょう!





ページの先頭へ     

前のページへ
HTML,CSSバグ&回避法リスト 目次 【数字キーでアクセス】
例 : 「2.1節」は「2」キーを2回連打して移動。「Q or P」で戻る。
「Ctrl-矢印」でフォーカス移動。
1. 目次
2. HTML関連
3. Netcape4.xとスタイルシート
4. スタイルシートその他の話題
5. ブラウザ別にスタイルシートを指定
6. その他・総合
6.1 ブラウザによって文字サイズ・行間・フォントが相違
6.2 文字サイズ変更の可否が不統一
6.3 XHTMLのページを表示できない(MacIE4.5)
6.4 指定外部ファイル(CSS,JS)が存在しないとページが表示されない(NS4)


ホーム [0] HTML,CSSバグ&回避法リスト:1.目次 [1] 6. その他・総合 ・サイトマップ [Shift-S]
■キー割当表示 [Shift-H] ─ KeyNavi Project 2003 ─