[実践編] | [目次] |
| (1) | (2) | (3) | (4) | QX トップページ | HOME |

もぉ〜大変!

ブラウザ毎の見え方の違い

私はいつも MSIE4 と NN4 で確認しながらホームページを作成しています。両ブラウザの設定ではなるべく同じ条件を与えるようにしていますが(例えばフォント)見え方が違います。今日はキャプチャー画像を使ってその違いに触れてみたいと思います。

両ブラウザのタグの解釈の違い

   見え方が違う理由の一つに両ブラウザのタグの解釈の違いがあります。例えば『等幅フォント』にするために <TT>、または <CODE>、または <SAMP> を用いてみると、MSIE4 では『等幅フォント』にした文字列は『等幅フォント』にしていない文字列より一つサイズの小さいフォントで表示されます。MSIE4 のキャプチャー画像を見る (27KB)。NN4 のキャプチャー画像を見る (26KB)。下方に見える [Home] は『等幅フォント』を指定、すぐ隣の [Move on] は無指定。予め欧文フォントとして MSIE4 では Araial 中、Lucida Console 中 を、NN4 では Arial 12pt、Lucida Console 12pt を設定。
   次の例ではテーブルタグに置いたリストタグの下方のマージンが違います。MSIE4 のキャプチャー画像を見る (22KB)。NN4 のキャプチャー画像を見る (21KB)。ここではテーブルタグの背景が緑色になっていますのでマージンの解釈の違いが容易にわかるでしょう。予め日本語フォントとして、MSIE4 では MS Pゴシック 中、MS ゴシック 中、NN4 では MS Pゴシック 12pt、MS ゴシック 12pt を設定。
   次の例では、MSIE4 では文字列に何ら変化が見られないのに、NN4 では文字列が点滅して見える箇所です。ただし NN 拡張の <BLINK> タグは使用していません。スタイルシートを使って点滅させています。スタイルシートの実装では NN4 の遥か上を行く MSIE4 ですが、『文字列の点滅』には対応していません。ページのあちらこちらで文字列を点滅させるのも考えものですが、ウィンクする顔文字 (^_-)---☆Wink を点滅させるくらいなら楽しくて良いのではと私は思うのですが。

   上で触れた両ブラウザのタグの解釈の違いの例は氷山の一角に過ぎません(^^;) またスタイルシートの実装に至っては天と地の差があったりします(-_-;) 両ブラウザで確認するとがっくり来てしまう事もたびたびです。http://www.webstandards.org/ (英語ページ)ではブラウザのタグの解釈の統一化を推進するためのプロジェクトが行われています。

[前の章に戻る]  [QX トップページ]  [次の章へ進む]


Maintained by KAY (Kanako Takeuchi) <kay@capella.freemail.ne.jp>

Fight for your right to standards!

Fight for your right to web standards!