■キー割当表示 [Shift-H] |
─ KeyNavi:キーボードを活用して ホームページを快適に─ |
ホーム [0] HTML,CSSバグ&回避法リスト:1.目次 [1] 6. その他・総合 | ・サイトマップ [Shift-S] |
HTML,CSSバグ&回避法リスト |
■ 6. その他・総合 |
|
注1: | 「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。 |
注2: | ブラウザ名で特に指定が無いものはWindows版についての記述です。 |
注3: | スタイルシートについては、特に断りの無い限り互換モードについての記述です。 |
■ 6.1 ブラウザによって文字サイズ・行間・フォントが相違 |
同じブラウザでも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 文字サイズ変更の可否が不統一 |
上のページの要点を抜粋すると
文字サイズを固定するにはピクセル値[px]を使う。 NS4では[px]以外は全て可変。NS6+では[px]も含め全てで可変。
Operaでは単位に関わらずそのまま拡大縮小可能。
NS6+でも固定するはテキストの代わりに画像を使う。 |
||
文字サイズを可変にするにはsize,キーワード(small等),パーセント,[em],[ex]を使用。 small,medium,largeなどのキーワードによる指定は
IE4+,NS4,Operaではデフォルトより大きめになる。
em,exによる指定はIE3.0では文字が小さくなる。
またIE5+ではサイズ変更時に大きさが急激に変化する。
|
||
NS6+以外では 文字サイズを[px]で与えればこの問題を回避できます。 レイアウトを崩したくない場所では[px]を使ったり 或いは画像でテキストを表現してもいいでしょう。
逆にユーザ側としては文字が小さすぎるとページが読みにくい場合があります。 例えば本文など重要な部分が[px]で固定されていて 拡大できないと視力の弱い人にはページの内容を把握できないかもしれません。 またモバイル機器など ディスプレイが小さくて且つ高解像度なものを 使用する場合にも見かけ上の文字サイズが小さくなり読みにくいでしょう。
単なる装飾的なものではなく内容の理解に欠かせない部分については パーセントやfontタグのsizeによって文字サイズを与えておき ユーザの好みに応じてサイズを変えられるようにしておくといいでしょう。
蛇足ですが ユーザによる文字サイズの変更は画像には適用されません。 画像も含めて拡大したい場合には ユーザにOperaを使ってもらうといいかも知れません。
■ 6.3 XHTMLのページを表示できない(MacIE4.5) |
また、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ツリーとして表示してしまいます。
その他にも 細かい文法規則のために ファイルサイズが増えたり、手打ちコーディングの場合は メンテナンスが大変になるなどの問題があります。
ページの構成がW3C文書のように固定的な場合はXHTMLを適用しやすいです。 しかし一般のページでは 画像やテーブルの多用など見栄え上の工夫、 各種ブラウザバグ対策などでソースが複雑になります。 結果として例外処理が増える為 プログラムで処理しにくくなります。
XMLによるデータ処理をしたい場合、XHTMLを直接記述せず プログラムで変換出力することにします。そして元のデータをXMLで書きます。 処理にはHTMLではなく 変換元のキレイなXMLを使うのが合理的です。
そもそもXML自体、細かい規則が多く 直接入力には不向きです。 別のインタフェースで被せたほうがいいでしょう。 他の言語や独自形式を採用するのも現実的です。 XMLが必要な場合は元データからXMLを変換出力します。
■ 6.4 指定外部ファイル(CSS,JS)が存在しないとページが表示されない(NS4) |
・実験:指定CSSファイルがないページ
・実験:指定JSファイルがないページ
その「Not Found」の状態から前のページに戻るのも少し面倒です。 というのも「戻る」ボタンを一度押すと BからAに戻り、またすぐにBとなって 再度「Not Found」が表示されます。 前のページに戻るには「戻る」ボタンを2回連続で素早く押すか 履歴を表示させて戻る必要があります。
致命的なバグになるので 外部ファイルのすっぽ抜けには注意しましょう!
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTML,CSSバグ&回避法リスト 目次
【数字キーでアクセス】
例 : 「2.1節」は「2」キーを2回連打して移動。「Q or P」で戻る。
「Ctrl-矢印」でフォーカス移動。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
ホーム [0] HTML,CSSバグ&回避法リスト:1.目次 [1] 6. その他・総合 | ・サイトマップ [Shift-S] |
■キー割当表示 [Shift-H] | ─ KeyNavi Project 2003 ─ |