P-0007 どのブラウザでも見えるページ作り

「 Microsoft(R) InternetExplorer 」（以下、「 IE 」）と「 Netscape(R) Navigator 」（以下、「 NN 」。「 NetscapeCommunicator 」は NN の他にいくつかのプログラムをまとめたもので、ブラウザ部はあくまで NN ）。 WWW ブラウザのシェアのほとんどはこの2つがほとんどを占めています。（他には Lynx や w3m 、 iCab といったマイナーなものが続いています）だいたい、 IE が8〜 9 に対し NN が1くらいの割合でしょうか。

この Tips では、「少なくとも IE ・ NN の両方で閲覧可能な HTML によるレイアウト」における注意点をいくつか絞って解説します。

IE を基準に作るときに注意すること

文字サイズに注意！

IE では、標準状態では NN よりも文字が大きく表示されます。 IE に合わせて文字サイズを設定した場合、 NN で見ると文字が小さすぎて読めないということもしばしばです。

具体的にいうと、<font size="X">で指定できる最小のサイズあたりですが、これは NN では文字が小さすぎて、ドットが潰れてしまいます。判読不可能とかそういうレベルじゃありません (^^;)

テーブルタグの閉じ忘れに注意！

テーブルタグの閉じ忘れは、 IE では（自動的にエラー訂正が行われて）一応表示できるものの、 NN ではそのテーブルから後の部分が一切表示されません。

HTML では、いくつかの要素で閉じタグを省略していいものがあります。しかし、各ブラウザの解釈部分のバグで省略とみなされない場合がたまにあります。省略しなければならない要素（<img>、<br>など）以外は、なるべくキチンと閉じておくようにしましょう。

特殊なスクリプトは厳禁！

Microsoft が独自に拡張している機能（ ActiveX 、 DHTML 、 JScript など）は、その多くが他のブラウザでは動作しません。せめて、インデックスなどの重要な部分には使わないようにしましょう。

表はスッポリ抜けるぞ！

IE ではテーブル中の空のセルもきちんと表示されますが、 NN ではその部分が表示されない仕様になっています（これはバグではなく、そういうプログラムになっているだけです。）。

純粋な「表」として使う場合は問題ないのですが、表を駆使してレイアウトをする場合は注意が必要です。空のセルには &nbsp; （実体参照での「空白」）や全角スペース、 1pixel の透明画像などを一つ入れておきましょう。 NN 独自拡張の<spacer>を使うのも手です。

また、これは NN のバグですが、「背景を指定した表の中にもう一つ表を作った場合、中にある表は背景色が無視されてしまう」というものがあります文字が読みづらくなったり画面が寂しくなったりということが起こりますので、くれぐれも注意してください。この問題は、背景画像を使うことで解決できます。

スタイルシートに注意！

NN では、「 JavaScript 」をオフにしている場合スタイルシートが適用されません。これはバグというよりは仕様のようで、正しく書かれた HTML ならこれでも別に問題はないのですが、スタイルシートが有効でないと正しく閲覧できないページというのがけっこうあり、閲覧に支障をきたすことが往々にしてあります。

例えば、 HTML 中で文字色を白に・ CSS で背景色を黒に指定している場合、スタイルシートが適用されないと文字が全く読めないという間抜けな状態になります。こうならないよう、文字色と背景色は必ずセットで指定しましょう。

NN を基準に作るときに注意すること

文字サイズに注意！

NN と IE 、標準状態のフォントサイズはほとんど同じと思っている人は多いと思います。しかし、 IE のフォントサイズは Windows のデスクトップの設定が適用されており、「画面のプロパティ」の「詳細（ Win98 では「設定」）」で「ディスプレイのフォントサイズ」を「大」にしている人の場合、 IE のフォントサイズも同時に大きくなります。 NN でガチガチにレイアウトしたページをその環境で見れば、レイアウトはグチャグチャに崩れてしまいます。

こういうことにならないよう、「横幅」や「縦幅」などの指定が必要な場面ではなるべく相対指定（全体の横幅に対して何％か、といった指定の仕方）を使いましょう。

特殊機能には気を付けろ！

IE に独自の機能があるのと同様に、 NN にも NN 独自の機能が搭載されています（<multicol>や<spacer>、<blink>など）。これらに依存したレイアウトは他のブラウザでは大きく崩れてしまいますので、注意が必要です。

おまけ：全てのブラウザ向けに注意すること

画像には代替テキストを！

<img>で指定した画像は、 Lynx などのテキストブラウザでは表示されません。また、 IE や NN でも、画像表示をオフにしている人の環境では表示されません。<img>要素には「 alt="（テキスト）"」属性で代替文字を指定することができますので、タイトルを画像で表現している場合などには必ず指定しておきましょう。

尚、この「 alt 」属性は、 HTML 4.01 からは必ず書かなければならない属性になりました。見出し横の飾り画像など、特に代替テキストを必要としない画像については、無理に代替テキストを考えるよりも「 alt=""」という風に「代替テキストは無い」と指定しておきましょう。

縦の配置はボロボロ！

IE や NN では<img>要素で「 align="texttop"」などの属性を設定することで画像を色々配置することが出来ます。しかし、全てのブラウザでこれが解釈できるわけではなく、むしろ IE ・ NN だけの独自拡張とも言えます。これらに依存したレイアウトは極力避けるようにしましょう。

Back