W-0035 CSS でよくある誤解

CSS 2 では CSS 1 に機能が追加されただけでなく、変更が加えられた部分もいくつかあります。また、 NetscapeCommunicator 4.x や InternetExplorer の実装と仕様とが食い違っている場合もあります。今までは IE に合わせていれば大概は大丈夫でしたが、仕様に忠実な実装をしている Netscape 6 ではそれだと不具合が起こる場合があります。

text-align はボックスの配置用ではない

text-align はボックス内のテキストの水平配置用のプロパティでなので、例えば table を text-align: center を指定した div で括っても、仕様では table 自体は左に寄ったまま、 table 内のテキストだけが中寄せされることになっています。 IE の間違った実装の代表です。

中寄せしたいブロックに対しては margin-left: auto; margin-right: auto と、右寄せしたいブロックに対しては margin-left: auto; margin-right: 0 と指定するのが仕様的には正しく、 N 6 はこれをちゃんと解釈します。

IE では今のところ auto を正しく解釈してくれないので、 text-align や HTML の align 属性と組み合わせて対処するしかないようです。

:hover, :active, :focus はリンク専用ではない

CSS 2 では、上記3種の疑似クラスは汎用のものとして定義されています。 a:hover と書いていると N 6 ではただのアンカー（ <a name="〜"> ）でも効果が現れてしまうので、注意が必要です。当サイトでは放置していますが (^^;)

これについては別項・ダイナミック疑似クラスを使いこなすで詳しく解説していますので、参考にしてみてください。

セレクタにアンダーバー（ _ ）は使えない

CSS 2 では、セレクタに直接使用できる文字は [A-Za-z0-9] の範囲にある文字、 ISO10646 で161以上のコードが振られている文字、それにハイフンだけです。それ以外の文字はエスケープして使うか、それらを使わない名前に置き換える必要があります。

別の名前に置き換える場合、例えば元が「 contents_list 」なら、「 contents-list 」や「 ContentsList 」のようにするといいでしょう。

エスケープする場合、 contents\_list, contents\5Flist, contents\00005Flist, contents\00005Flist などのようにすれば OK です。ただし一部のブラウザしか対応していないので、こちらの方法はあまりお薦めできません。

参考：使えない文字, 注意点, ブラウザ振り分け

※ 2001/8/27付けの訂正の中で、 識別子（セレクタ等）にはアンダーバーも使える と修正されています。

ボックスの width, height は要素の内容部分のサイズを指す

IE 4,5では width で指定した幅がボーダーラインまでの幅になりますが、 CSS 2 の仕様では padding の内側の幅で解釈するのが正しいことになっています。 N 6 では仕様通りの解釈をするので、 width や height を多用していると思わぬ表示の崩れが起こる可能性があります。

N 6 の独自拡張プロパティを使うと、 IE と同じ解釈をさせることができます。別項・ width/height プロパティの裏技！で解説していますので、そちらを参照して下さい。

インライン要素への border

仕様では、インライン要素へ指定された border は、 background のフチに描画するような形で表示するのが正しいとされているようです（ただし折り返し部分には border は付かない）。 IE 4/5 ・ NN 4.x はどちらも違った実装をしていたので、 N 6 の表示はバグだと勘違いしがちですが、本当は N 6 が一番正解に近い表示をしています。

float には width が必須

仕様では、 float するボックスは（ img など要素自体の横幅が元から決まっているもの以外は） width で幅を明示しなければなりません。 WinIE 、 Mozilla などは無指定でもそれなりに表示してくれますが、 MacIE では無指定だと表示がおかしなことになります。

尚、この問題については別項で詳しく解説しています。

alt はポップアップ用のメッセージではない

これは CSS の話ではなく HTML の話ですが……　 alt 属性は<img> に付けるコメントではなく、画像が表示されないときに画像の代わりに表示される文字列と定義されています。 IE などでは画像の上にポインタを持っていくと alt をポップアップで表示してくれますが、これはたまたまそういう実装の仕方をしているだけです。 N 6 でそうならないのはバグではありません。

コメントや題名は、 alt でなく title 属性に書いておきましょう。ちなみに title 属性は、 IE でも N 6 でもポップアップ表示してくれます。

PageTop