Bibbidi-Bobiddi-Boo

各ブラウザでの画面表示

チェック用のページはちょっと前のリソースなのでXHTMLじゃなくてHTML4.01だったりしますが。(^^;

• チェック用のページ
• 上記ページで使用している外部CSS

各ブラウザでの表示（全て1024x800で最大化した状態）

• Mozilla0.9.7(25KB)
• Opera6.0(25KB)
• IE5.5SP2(30KB)
• NN4.75(30KB)
• 上記の一覧（画像サイズは一回り小さいです）

解説

見出しと本文の幅

見出し<h1>と本文<div class="unit">にはmax-widthが指定されています。このプロパティは『表示可能範囲の幅が指定された幅より広い場合はボックスの幅を指定値に、表示可能範囲がそれ以下の場合は範囲内に収まるように自動的に調整する』というものです。高解像度モニタでウィンドウを大きく広げて閲覧していても文章が横にだらだらと伸びるのを防ぐことができ、尚かつ低解像度モニタやウィンドウ幅を狭くして閲覧している場合でも横スクロールを防止することができます。個人的には、長いテキストを読ませる場合はボックスが横に広がりすぎると読みにくくなると思うので、うまく使えば長い文章も読みやすく表示できるのではないかと思います。

但しこのプロパティに対応しているのは、現状ではMozillaとOperaのみなので、IEユーザが圧倒的に多い現状では閲覧者のほとんどはこの恩恵を受けられません。なので、当初はうちでも指定していたけどやめました。(^^;

表示可能範囲が指定値より広い場合にボックス位置がどうなるかは、max-widthを指定した要素のmarginをautoにするか否かで決まりますが、autoに対応していないIEではmarginが無視されてしまいます。CSSを見て貰えばわかりますが、<h1>のmargin-left:autoの前にmargin-left:5%を指定しているのですが、autoで上書きされてしまうようで、結局<h1>のmargin-leftは0になってしまいます。

abbrとacronym

チェック用ページにはabbr要素とacronym要素も使用していますが、これもブラウザによって変わります。→画面表示一覧

MozillaとOperaは両要素に対応しています。が、Operaはカーソルの指定が無効になっています。IEはacronymのみ対応、NN4.75はどちらも非対応です。要素への対応とブラウザデフォルトでの表示及びCSSでのカーソル・装飾指定のそれぞれの対応は下の表のようになります。

ブラウザ名	要素への対応	デフォルト表示	CSSでの指定
Mozilla	○	カーソル：help 装飾：文字と同色の下線(dotted)	カーソル・装飾共に有効
Opera	○	カーソル：通常 装飾：なし	装飾のみ有効
IE5.5	acronymのみ○	カーソル：テキスト選択 装飾：なし	カーソル・装飾共に有効
NN4.75	×	×	×

-moz-border-radiusプロパティ

チェック用ページのCSSには 「-moz-border-radius」というのが指定されています。これはCSS3で標準となるかも知れない「border-radius」の実験のためのMozilla独自拡張です（N6でも有効）。　なので、本来は公開されたWeb上では使用するべきでないのですが、将来的に使えるようになるかもしれないのでわざと入れてみました。これを指定するとボックスの角が丸くなります。CSS3で正式採用されれば、所謂「角丸テーブル」なんて必要なくなりますね。(^^)　Mozilla独自拡張については、CSS Laboratory内のベンダーの独自拡張CSSに一覧があります。

NN4.xでCSS

NN4.xは基本的にスタイルシートはダメダメです。（対応してないなら無視してくれればいいのに中途半端に反応してしまうので、想定したレイアウトに近づけようとすると暗号を解いている気分になれます。^^;）　htmlファイルに直接記述しても大変なのに、外部スタイルシートを読み込ませる場合は『画像へのパスの基準が通常と異なる』という素晴らしいバグ（仕様？）があるので、さらにやっかいです。

通常、CSS内で背景やリストマーカー等の画像を指定する場合は、画像へのパスはそのCSSファイルが基準になります。だからサイト内の全ページで共通のスタイルを使用する場合もCSSファイルは1つで済みます。

ところが、NN4.xの場合画像へのパスの基準はhtmlファイルなので、htmlファイルの階層が変わると画像が読み込めなくなってしまします。（相対パスじゃなくて絶対指定すればうまくいくのかもしれないけれど、サイト内で絶対指定ってあんまり好きじゃない…。のでまだ試してません。）

他にも、display:inlineがinlineにならないとか、リスト関係のmarginがおかしいとか、floatが綺麗に並んでくれないとかいろいろありますが、予想外の反応をしてしまうことが多いので詳しくは調査できてません。