Silverlight をインストールするには、ここをクリックします*
Japan変更|すべてのMicrosoft のサイト|サインイン
MSDN*
マイクロソフト サイトの検索:
|MSDN ライブラリ|デベロッパー センター|ダウンロード情報|開発ツール製品|コミュニティ|ご意見・ご要望|サイトマップ
MSDN Home   MSDN Home
MSDN Home > Internet Explorer デベロッパー センター > Internet Explorer 6 における CSS の拡張

Internet Explorer 6 における CSS の拡張

Lance Silver
Microsoft Corporation


March 2001
日本語版最終更新日 2001年9月25日

要約 : この記事では、Microsoft Internet Explorer 6 以降で提供される Cascading Style Sheets (CSS) 仕様に対するサポートの強化について説明します。


前提条件 : この記事は、HTML および CSS に精通している読者を前提としています。


この記事のサンプルを表示するには、Internet Explorer 6 以降をシステムにインストールする必要があります。Public Preview は、http://www.microsoft.com/windows/ie_intl/ja/ からダウンロードできます。


目次


はじめに
!DOCTYPE スイッチ
ボックスのサイズの指定方法の違い
キャンバスを表示する要素の違い
新規のプロパティ
プロパティに追加された値
厳密になったスタイル シートの構文解析
その他の新機能
以前の Internet Explorer 用に作成したアプリケーションの表示
追加情報


はじめに

Microsoft® Internet Explorer 6 以降のバージョンは、CSS 機能でそれ以前の Internet Explorer のバージョンではサポートされていなかった機能をサポートします。新しく 2 つの CSS プロパティ、min-height および word-spacing がサポートされています。 white-space プロパティの値 pre、display プロパティの値 list-item など、いくつかの値が新しくサポートされています。そのほか重要な機能としては、スタイル シートのこれまで以上に厳密な構文解析、ドキュメントのコンテンツ表示部分の一番外側となる HTML 要素の変更があります。


これらの拡張機能は、CSS 仕様に準拠させるために加えられました。CSS レベル 1 (CSS1) の仕様で定義されているすべてのプロパティ、値、機能がサポートされています。この中には、要素の測定方法、フォーマット方法を定義するボックス モデル、およびこれに関連するプロパティ margin、border、および padding が含まれます。


しかも、これらの機能拡張の素晴らしい点は、以前のバージョンの Internet Explorer 用に開発したアプリケーションを使用しても、互換性にかかわる深刻な問題が発生しないことです。


!DOCTYPE スイッチ

このセクションでは、Internet Explorer 6 以降で、ドキュメントに !DOCTYPE 宣言を設定して、標準準拠モードを有効にする方法について説明します。


!DOCTYPE 宣言は、Standard Generalized Markup Language (SGML) の宣言の 1 つで、ドキュメントが理論的に準拠する文書型定義 (DTD) を指定します。この宣言は、終了タグのない HTML タグに似ていて、感嘆符 (!) で始まり、属性の名前と値の個々の組み合わせをトークンで示します。この宣言は、ドキュメントの先頭で、HTML タグの前に指定する必要があります。


このように、ドキュメントの先頭で !DOCTYPE 宣言を記述して、宣言の Label に有効な値を指定し、必要に応じて Definition および (または) URL を指定すると、標準準拠モードが有効になります。Label は、DTD の固有名を指定し、これに DTD のバージョン番号を付加できます。Definition は、Label で指定した DTD の定義を指定します。URL は、DTD の場所を指定します。


HTML 4.0 の仕様で指定されている Definition には、Frameset、Transitional、および Strict の 3 種類があります。Frameset は、FRAMESET ドキュメントに使用します。Transitional は、FRAMESET 以外のすべてのドキュメントに使用します。Strict は、HTML 4.0 仕様によると "World Wide Web Consortium (W3C) が、スタイル シートのサポートが成熟するにつれて、徐々に使われなくなると考えているプレゼンテーション属性および要素を含まない" ドキュメントに使用します。


次の表は、!DOCTYPE 宣言のどの値が Internet Explorer 6 以降で標準準拠モードを有効にするかを示したものです。


Label Definition URL あり URL なし
!DOCTYPE なし 無効 無効
HTML (バージョン指定なし) 無効 無効
HTML 2.0 無効 無効
HTML 3.0 無効 無効
HTML 3.2 無効 無効
HTML 4.0 指定なし 有効 有効
HTML 4.0 Frameset 有効 無効
HTML 4.0 Transitional 有効 無効
HTML 4.0 Strict 有効 有効
XHTML 有効 有効
XML 有効 有効
認識されない !DOCTYPE 有効 有効

上記の表は、ドキュメントに !DOCTYPE 宣言が指定されていないとき、!DOCTYPE 宣言に Label を使用して HTML のバージョンが指定されていないとき、あるいは HTML 4.0 以前のバージョンが指定されているとき、標準準拠モードが無効になることを示しています。また上記の表から、!DOCTYPE 宣言で、HTML 4.0 の Definition に Frameset または Transitional と指定すると、URL が指定されているときのみ標準準拠モードが有効になることがわかります。!DOCTYPE 宣言で、HTML 4.0 の Definition に Strict と指定した場合、あるいは Definition は指定せずに HTML 4.0 のみを指定した場合も、標準準拠モードが有効になります。


HiDad 11.22 などの DTD を新しく作成できるように、!DOCTYPE 宣言が認識されない場合は、標準準拠モードは有効になります。HTML 1.0 や HTML 3.22 など、表に示されていないバージョンの HTML を指定しても、標準準拠モードは有効になります。


!DOCTYPE の例

このセクションの例では、ドキュメントに対する DTD を指定するための !DOCTYPE の使用方法および標準準拠モードを有効にする方法を示します。


次の 2 つの宣言では、Transitional HTML4.0 DTD が指定されています。また、2 つ目の宣言では、DTD の URL が指定されていますが、1 つ目の宣言では、DTD の URL は指定されていません。Internet Explorer 6 以降を使用している場合、2 つ目の宣言のとき標準準拠モードが有効になります。1 つ目の宣言では、標準準拠モードは有効になりません。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

次の 2 つの例では、HTML 4.0 DTD が指定されています。また、最初の宣言では、Definition の指定はありませんが、2 つ目の宣言では、DTD の Definition として Strict が指定されています。URL は、どちらの宣言でも指定されていません。このとき、どちらの宣言でも標準準拠モードは有効になります。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

ボックスのサイズの指定方法の違い

このセクションでは、標準準拠モードを有効にするように !DOCTYPE 宣言を指定したとき、Internet Explorer 6 以降のバージョンでは、要素のプロパティ width および height がどのように計算されるのか、およびその計算方法が以前のバージョンとどのように違うのかについて説明します。


CSS1 ボックス モデルでは、HTML 要素の中のコンテンツが、見えない長方形のボックスに入っていると定義されます。このボックスは、プロパティ margin、border、および padding で指定される 3 重のボックスに入っています。スタイル シートを使用すると、ボックスの大きさ、外観、およびそれを囲むボックスを調整できます。


以前のバージョンの Internet Explorer では、CSS1 ボックス モデルとは違う方法でプロパティ width および height を計算します。CSS1 では、width プロパティは、要素のコンテンツが入ったボックスの左辺と右辺の間の距離として定義されています。同様に、CSS1 では、height プロパティはボックスの上辺と下辺の間の距離となります。ただし、以前のバージョンの Internet Explorer では、プロパティ width および height に、要素のボックスの外側にある border および padding が含まれます。この違いを次の図で説明します。


Internet Explorer 6 および以前のバージョン間における、width および height プロパティの計算方法の違い

図 1. Internet Explorer 6 および以前のバージョン間における、width および height プロパティの計算方法の違い


標準準拠動作

Internet Explorer 6 以降のバージョンで、標準準拠モードを有効にするように !DOCTYPE を設定すると、プロパティ width および height は、それぞれボックスの左辺と右辺の間、および上辺と下辺の間の距離を指定します。ここには、border および padding は含まれません。


非標準準拠動作

!DOCTYPE によって標準準拠モードが有効にならないときは、以前のバージョンの Internet Explorer と同様に、width プロパティにはオブジェクトのコンテンツ ボックスだけでなく、プロパティ border-left、border-right、padding-left、および padding-right の値が含まれます。width プロパティの値からこれらのプロパティの値の合計を引くと、親オブジェクトのコンテンツ ボックスの横幅になります。同様に、height プロパティの値から border-top、border-bottom、padding-top、および padding-bottom プロパティの合計を引くと、親オブジェクトのコンテンツ ボックスの高さになります。


ボックス モデルの例

このセクションの例では、Internet Explorer 6 以降のバージョンを使用して、標準準拠モードを有効にするようにドキュメントの !DOCTYPE を指定したとき、全く同じ要素が違って表示されることを示しています。


次に示す HTML サンプルの DIV 要素には、width および height に 200 ピクセルが、border-width に 50 ピクセルが指定されています。サンプル コードの下のリンクをクリックすると、2 つの IFRAME 要素を持つドキュメントが呼び出されます。左側の IFRAME 要素によって指定されたドキュメントには、Internet Explorer 6 以降では標準準拠モードが有効になるように指定する !DOCTYPE が含まれています。右側の IFRAME 要素によって指定されたドキュメントには、標準準拠モードを有効にしない !DOCTYPE が含まれています。右側の IFRAME 要素は、以前のバージョンの Internet Explorer では、DIV 要素がどのように表示されるかも示しています。


<div style="width:200px; height:200px; 
  border-width:50px; border-style:solid">
    Hi kids. Daddy will be home soon. I love you both!
</div>

サンプル ページを表示する (英語)


TABLE 要素

以前のバージョンの Internet Explorer では、オート レイアウト表の要素 TD および TH の width プロパティを計算するときに、CSS1 ボックス モデル セマンティックスが使用されますが、要素 TD および TH の height プロパティの計算では使用されません。固定レイアウト表では、CSS1 ボックス モデル セマンティックスは使用されません。


注 : 既定値はオート レイアウト表です。固定レイアウト表を作成するには、TABLE 要素の table-layout プロパティを fixed に設定します。固定レイアウト表は、オート レイアウト表より表示が早い点が優れています。

IMG 要素

以前のバージョンの Internet Explorer では、IMG 要素のプロパティ width および height の計算にも、CSS1 ボックス モデル セマンティックスが使用されます。ただし、padding は IMG 要素に適用されません。


キャンバスを表示する要素の違い

このセクションでは、Internet Explorer 6 以降のバージョンで、!DOCTYPE 宣言が標準準拠モードを有効にしたときの、要素 BODY および HTML の表示方法の違いについて説明します。


以前のバージョンの Internet Explorer では、BODY 要素がキャンバス (ドキュメントのコンテンツを表示するための全領域) となります。BODY 要素のサイズを変更することはできず、ウィンドウ サイズと同じになります。この要素のマージンは、要素の境界の内側で、かつスクロール バーの内側です。


Internet Explorer 6 以降では、標準準拠モードを有効にするように !DOCTYPE 宣言を指定すると、BODY 要素のサイズが、そのコンテンツに合わせて決まります。または、DIV オブジェクトのように、そのサイズを明示的に設定できます。標準準拠モードでは、HTML 要素がキャンバスを表します。


標準準拠モードを有効にすると、配置された要素が配置された親を持たないとき、HTML 要素が配置コンテナにもなります。標準準拠モードを無効にすると、以前のバージョンの Internet Explorer のように、配置された親がないと、絶対位置を指定した要素も BODY との相対的な位置に配置されます。このとき、BODY 要素がキャンバスとなります。


スクロール バー

SCROLL 属性は、要素のスクロール バーを有効にするかどうかを指定します。Internet Explorer 6 以降のバージョンで、標準準拠モードを有効にするように !DOCTYPE を設定すると、SCROLL 属性は HTML 要素に適用されます。標準準拠モードが無効になっているときは、この属性は、HTML 要素ではなく、BODY 要素に適用されます。


注 : 属性 overflow、overflow-x、および overflow-y は、コンテナのサイズより大きいコンテンツを管理するときに使用するもので、標準準拠モードが有効になっていると、これらの属性は HTML 要素に適用されます。

別々の背景

要素 HTML および BODY に対して、個別に background プロパティを指定できます。標準準拠モードが有効になっていると、両方の背景がはっきりと表示されます。background プロパティを BODY 要素に対して定義し、BODY のマージンが既定値のままになっていると、BODY 要素のコンテンツのまわりに細い帯だけが表示されるということがよくありますが、別々の背景を指定することで、この問題を解決できます。


次の例は、Internet Explorer 6 以降で標準準拠モードを有効にするように !DOCTYPE 宣言を指定したときに、同じ HTML がどのように違って表示されるかを示したものです。HTML 要素の背景として赤が指定され、BODY 要素には高さと横幅が指定されています。標準準拠モードが有効の場合のみ、これらのプロパティの効果を確認できます。標準準拠モードが有効になっていない場合は、BODY 要素がウィンドウを埋めてしまい、HTML 要素の背景は見えません。サンプル コードの下のリンクをクリックすると、2 つの IFRAME 要素を持つドキュメントが呼び出されます。左側の IFRAME 要素によって指定されたドキュメントには、Internet Explorer 6 以降では、標準準拠モードが有効になるように指定されています。右側の IFRAME 要素によって指定されたドキュメントには、標準準拠モードを有効にしない !DOCTYPE が含まれています。右側の IFRAME 要素は、以前のバージョンの Internet Explorer では、DIV 要素がどのように表示されるかも示しています。


<html style="background:red">
  <head>
    <title>Canvas Comparison</title>
  </head>
  <body style="background:blue; width:200px; height:150px">
    <div style="background:yellow">Who moved my canvas?</div>
  </body>
</html>

サンプル ページを表示する (英語)


注 : 標準準拠モードが有効になっているとき、HTML 要素に background プロパティを指定しないと、BODY 要素の背景が HTML 要素の背景となります。これは、CSS2 に準拠している設定です。

新規のプロパティ

このセクションでは、Internet Explorer 6 以降で追加された 2 つの CSS プロパティ、min-height および word-spacing について説明します。


min-height プロパティ

min-height プロパティは、要素の高さの最小値を設定または取得します。Internet Explorer 6 でこのプロパティを使用できるのは、固定レイアウト表の要素 TD、TH、および TR のみです。このプロパティは、ドキュメントの !DOCTYPE 宣言が標準準拠モードが有効かどうかにかかわらず、使用することができます。


要素 height の既定値は、auto です。既定値のとき、要素の高さは動的に変化します。min-height プロパティを使用すると、固定レイアウト表のセルや行の高さの最小値を指定できます。


次のサンプルは、min-height プロパティを明示的に宣言する方法を示しています。固定レイアウト表の最初の行は、最小の高さが 100 ピクセルに指定されています。


<table style="table-layout:fixed">
  <tr style="min-height:100px">
    <th>Row 1, Cell 1</th>
    <th>Row 1, Cell 2</th>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

word-spacing プロパティ

word-spacing プロパティは、Macintosh でも使用できます (Internet Explorer 4.01 以降)。このプロパティは、Microsoft® Win32® でも使用できるようになりました (Internet Explorer 6 以降)。このプロパティは、要素内の単語間に追加するスペースの長さを設定または取得します。Internet Explorer で改行するために使用される可能性のある文字 (スペースやハイフンなど) として語が定義されている場合、このプロパティは、それぞれの語の後に指定した数のスペースを加えます。このプロパティは、どのようなテキスト コンテナにも設定できます。


プロパティに追加された値

このセクションでは、以前のバージョンではサポートされていませんでしたが、Internet Explorer 6 でサポートされるようになった値について説明します。


margin および width プロパティの auto 値

margin および width プロパティの値 auto は、要素の横幅の設定が過剰に制限されている場合 (つまりスタイル規則が重なっていたり、矛盾しているとき)、このいずれのプロパティを調整するかを指定するものです。このプロパティは、Internet Explorer 6 でドキュメントの !DOCTYPE 宣言が標準準拠モードを有効に設定しているときに使用することができます。


フローティングではない、ブロックレベルの要素の水平位置および横幅は、プロパティ margin、border、padding、および width によって設定されます。そのような要素は、必ずプロパティ left および right の値の合計が、その要素含むブロック 要素の横幅と等しくなります。つまり横幅は、要素を含むブロックから継承されます。


要素を含むブロックの横幅を、その要素の内部の要素のプロパティ margin、border、padding、または width の値を変更することによって変えることはできません。要素のこれらのプロパティの 1 つまたは複数の値を指定すると、要素の横幅の合計がコンテナの横幅を超えないように、他のプロパティの値を調整しなければならないことがあります。width の値は、過剰に制限されていることがあります。


CSS1 では、margin および width の値が調整されることがありますが、border および padding の値は調整されません。margin および width プロパティでのみ値を auto に設定できます。width プロパティに設定した値が、その要素の width の過剰制限の原因となる場合は、margin プロパティの 1 つが調整されることがあります。margin プロパティの 1 つまたは複数がその要素の width の過剰制限の原因となる場合は、その width プロパティが調整されます。


次の規則は、要素の width が過剰に制限されているときに、どのプロパティが調整されるかを示しています。

  • direction プロパティの値が ltr のとき、margin-right に指定された値は無視され、その値が調整されます。direction の値が rtl のときは、margin-left プロパティが調整されます。

  • 値に auto が指定されているプロパティが 1 つだけの場合は、そのプロパティが調整されます。

  • width が auto に設定されている場合は、他の auto の値は 0 となり、width が合計値に調整されます。

  • margin-left と margin-right の両方が auto になっているときは、この 2 つの値が同じ値になるように計算されます。

auto の例

次の例は、Internet Explorer 6 以降のバージョンで、標準準拠モードを有効にするように !DOCTYPE を設定すると、同じ要素がどのように違って表示されるかを示したものです。


次の HTML のサンプルの中の最初の 3 つの DIV 要素は、標準準拠モードが有効になっているかどうかにかかわらず、同じように表示されます。最初の DIV 要素は、プロパティ width および margin が設定されていないので、width が 100% になり、左右のマージンは設定されません。2 つ目の DIV 要素は、width および margin-left プロパティが指定されているので、margin-right プロパティが調整されます。3 つ目の DIV 要素は、width プロパティが指定され、margin-right プロパティが auto になっているので、margin-right が調整されます。


4 つ目および 5 つ目の DIV 要素は、width プロパティが指定され、1 つまたは複数の margin プロパティが auto に設定されます。標準準拠モードが有効の場合のみ、これらのプロパティの効果を確認できます。標準準拠モードが有効でないと、DIV 要素は margin-left プロパティが 0px に設定されているときと同じように表示され、その margin-right プロパティは auto に設定されます。


サンプル コードの下のリンクをクリックすると、2 つの IFRAME 要素を持つドキュメントが呼び出されます。左側の IFRAME 要素によって指定されたドキュメントには、Internet Explorer 6 以降では標準準拠モードが有効になるように指定する !DOCTYPE が含まれています。右側の IFRAME 要素によって指定されたドキュメントには、標準準拠モードを有効にしない !DOCTYPE が含まれています。右側の IFRAME 要素は、以前のバージョンの Internet Explorer では、DIV 要素がどのように表示されるかも示しています。


<body>
  <div style=""></div>
  <div style="width:50%; margin-left:0px"></div>
  <div style="width:50%; margin-right:auto"></div>
  <div style="width:50%; margin-left:auto"></div>
  <div style="width:50%; margin-left:auto; margin-right:auto"></div>
</body>

サンプル ページを表示する (英語)


display プロパティの list-item 値

display の値によって、基本形や要素の種類、要素を表示させるかどうかを制御できます。display プロパティの値を list-item に設定すると、すべての要素を、リスト項目 (リスト マーカーを持つブロック レベルの要素) にできます。要素の display プロパティが list-item に設定されていると、LI 要素と同じ CSS プロパティがサポートされます。つまり、ブロック 要素が持つ通常のプロパティに加え、list-style、list-style-type、list-style-image、および list-style-position がサポートされます。


LI 要素の番号機能は、display プロパティが list-item に設定されている場合の LI 以外のブロック 要素の番号機能とは異なります。LI 要素は、一番近くにある OL または UL 要素からインデックスを取得するのに対し、LI 以外のブロック 要素は、親の children 集合からインデックスを取得します。display プロパティの値 list-item のサポートは、LI 要素のインデックス作成に影響を与えません。


この値は、標準準拠モードが有効になっているかどうかにかかわらず使用できます。


white-space プロパティの pre 値

white-space プロパティは要素内のホワイト スペースおよび改行を制御するためものです。Internet Explorer 6 以降のバージョンで、標準準拠モードを有効にするように !DOCTYPE を設定すると、値 pre によってソース内にホワイト スペースおよび改行を保持できます。ソース内の改行、タブ文字 (\n および \t) も残されます。連続するホワイト スペース文字も維持されます。この値によるオブジェクトのコンテンツのレイアウトは、PRE 要素のレイアウトと非常に似ています。コンテンツの表示に影響するだけでなく、W3C Document Object Model (DOM) を介してアクセスされたコンテンツの表示方法にも影響します。


標準準拠モードを無効にした場合はこの値を無効にできますが、表示には影響しません。この場合は、normal と同様に機能します。


注 : 標準準拠モードが有効になっていると、white-space プロパティが使用できるのは、DIV 要素のようなブロック レベル 要素のみです。標準準拠モードが有効になっていない場合、Internet Explorer 5.5 では、このプロパティはすべての可視要素に適用されます。

厳密になったスタイル シートの構文解析

このセクションでは、Internet Explorer 6 におけるスタイル シートの解析方法の変更点について説明します。


Internet Explorer 6 以降のバージョンで、標準準拠モードを有効にするように !DOCTYPE 宣言を設定すると、CSS1 に準拠しないスタイル シートの宣言は無視されます。以前のバージョンでは、たとえば、16 進の RGB 値の先頭にある # 記号を忘れた場合など、無効な宣言があっても問題のない場合がありました。


スタイル シート内のコメント

CSS1 では、スタイル シートの中で、C プログラミング言語で使われるコメントと同様のテキスト コメントを記述できます。C 言語のコメントは、"/*" で始まり、"*/" で終わります。以前のバージョンの Internet Explorer では、スタイル シートに C 言語のコメント、または HTML のコメントのいずれかを使用できます。HTML のコメントは、"<!--" で始まり、"-->" で終わります。


次の例は、C 言語と HTML のコメントの違いを示しています。


/* このように、スタイル シートに C 言語のコメント ブロックを使用できます。*/
<!-- このようにスタイル シートに HTML コメントを使用することはできません。-->

Internet Explorer 6 以降のバージョンでは、標準準拠モードが有効になるようにドキュメントの !DOCTYPE 宣言を設定すると、1 つの例外を除いて、原則として C 言語のコメントしか使用できません。その例外とは、HTML コメントの中にスタイル シート規則を入れる方法です。スタイル シートを HTML コメント ブロック内に入れると、下位レベルのブラウザはスタイル シート内のテキストを表示しません。次に、埋め込みスタイル シート内で HTML コメントを例外的に使用できる唯一の例を示します。


<style>
<!--

  /* 規則の始め */
  H1.blue  { background-color:blue }
  .
  .
  .
  /* 規則の終わり */
  
-->
</style>

簡略化プロパティで認識されないトークン

CSS1 では、簡略化プロパティに認識されないトークンがあると、その簡略化プロパティの設定全体が無視されます。たとえば、"text-decoration: underline cross-out" は、"cross-out" が text-decoration プロパティの値として認識されないので無視されます。このとき、underline も無視されます。


以前のバージョンの Internet Explorer では、認識されない値があっても、その直前までは宣言の解析が行われます。したがって、"text-decoration: underline cross-out overline" という設定では、underline は解析されますが overline は解析されません。ここでいう簡略化プロパティには、font、background、background-position、text-decoration、margin、padding、border、 border-top、border-right、border-bottom、border-left、border-color、border-width、border-style、list-style-image、list-style、clip、behavior、text-autospace、および layout-grid があります。


Font プロパティの部分的な設定

CSS1では、font 宣言を行う必要があり、font-size および font-family の指定が必須となります。たとえば、"font: 14pt" と宣言すると、font-size は指定してありますが、font-family が指定されていないので、この宣言は無視されます。以前のバージョンの Internet Explorer では、フォント設定を部分的に行うことができました。


RGB カラーに関する # の欠落

CSS1 では、16 進の RGB 値 で指定した色の先頭には、# 文字を付ける必要があります。たとえば、"FFFFFF" と指定すると、この宣言は無視されてしまい、Internet Explorer の以前のバージョンのように"#FFFFFF" (白) と同等には扱ってくれません。これは、色を扱うすべてのプロパティに適用されます。


ピクセル値として扱われる単位識別子の欠落

CSS1 では、cm、mm、in、pt、pc、px などの単位識別子を指定する必要があります。単位識別子が指定されていない値、および数値と単位識別子の間にホワイト スペースが入っている値は無視されます。以前のバージョンの Internet Explorer では、単位識別子が指定されていない数値は、"px" が文字列の後ろに追加されているとして、ピクセル単位として扱われました。


次の例では、!DOCTYPE により標準準拠モードが有効のとき、どちらのプロパティも無視されます。最初のプロパティが無視されるのは、単位識別子が指定されていないからです。2 つ目のプロパティが無視されるのは、数字と単位識別子の間にホワイト スペースが入っているからです。以前のバージョンの Internet Explorer では、"px" が数字の後ろに指定されているとして扱われます。また 2 つ目のプロパティのように、数値と単位識別子の間にホワイト スペースが含まれている場合、そのホワイト スペースは無視されます。


DIV.Rachel { width: 817; height: 11 cm; }
注 : この規則には、例外が 1 つあります。line-height は、単位が指定されていない数値も無視されず、倍率として取り扱われます。たとえば、"line-height: 2" は、"line-height: 200%" と同じ意味になります。ただし、この場合、数値の継承方法は異なります。

二重引用符付きキーワード

CSS1では、"red" のように、色名などのキーワード トークンや、"small-caps" などの有効なプロパティ値は、スタイル シートの中では二重引用符で囲めません。次の例では、両方のプロパティが無視されます。以前のバージョンの Internet Explorer では、二重引用符が無視され、キーワード トークンが認識されます。


DIV.George { color: "red"; font-variant: "small-caps";}
注 : スクリプト言語では、今でも二重引用符が必要です。

数字から始まる CLASS および ID の値

CSS1では、CLASS や ID の属性の値を数字 (0-9) で始めることはできません。以前のバージョンの Internet Explorer では、これらの値を数字で始めることができました。


大文字と小文字を区別する CLASS および ID の値

HTML 4.0 では、CLASS および ID の属性の値については大文字と小文字が区別されます。


その他の新機能

Internet Explorer 6 以降のバージョンで、標準準拠モードを有効にするように !DOCTYPE 宣言を設定すると、いくつかの機能が以前のバージョンとは異なる動作を実行します。このセクションでは、そのような機能について説明します。


font-variant プロパティの small-caps 値

margin および width プロパティの値に small-caps と指定すると、"小さい大文字" に変わります。要素内の文字がすべて大文字となり、元のテキストでは小文字の文字は、元々大文字の文字より小さく表示されます。以前のバージョンの Internet Explorer では、small-caps は、要素内のすべての文字に同じフォント サイズを適用しました。


IMG 要素のパディング

padding、padding-bottom、padding-top、padding-left、および padding-right などのパディング プロパティが、IMG 要素上でサポートされます。以前のバージョンの Internet Explorer では、padding プロパティは IMG 要素ではサポートされていませんでした。


font-size プロパティのキーワード値

font-size プロパティの値 medium は、既定値の通常フォント サイズと同じです。


このプロパティのキーワード値には、xx-small、x-small、small 、medium 、large、x-large、xx-large などを指定できます。以前のバージョンの Internet Explorer では、これらの値をビジュアルに定義することはできませんでした。通常フォント サイズの既定値は medium ではありません。small が既定値です。


text プロパティを継承する TABLE 要素

TABLE 要素は、text プロパティの値を親から継承します。継承される text プロパティには、color、font-size、font-weight、font-style、font-variant、text-decoration、text-transform、letter-spacing、line-height などがあります。以前のバージョンの Internet Explorer では、TEBLE 要素の font-family プロパティ以外のすべての text プロパティは、BODY 要素の設定値と同じ値を設定する必要がありました。


注 : TABLE 要素の font-family プロパティは、Internet Explorer 3 以降で継承されています。

インライン 要素の width および height

SPAN、B、および I などのインライン 要素は、width や height プロパティをサポートしません。標準準拠モードを有効にして、インライン 要素の width や height プロパティを設定するには、インライン 要素の display プロパティを inline-block に設定します。


エスケープ文字

CSS1 では、円記号 (\) をエスケープ文字として使用します。円記号に続く文字が本来持つ意味が無効になります。次の例では、アポストロフィをエスケープしています。


STYLE="font-family:'Rachel\'s font'"

16 進の値を使用して Unicode 文字をエスケープすることもできます。たとえば、"\0009" はタブ文字のエスケープです。


以前の Internet Explorer 用に作成したアプリケーションの表示

このセクションでは、Internet Explorer のすべてのバージョンでアプリケーションを正しく表示する方法を説明します。


Internet Explorer 6 以降のバージョンで、標準準拠モードが有効でない場合は "互換" モードとなります。Internet Explorer の以前のバージョン用に開発したアプリケーションを、Internet Explorer 6 以降でも同じように表示するには、!DOCTYPE 宣言で、標準準拠モードを無効にします。


標準準拠モードでは、Internet Explorer の他のバージョンとの互換性は保証されません。標準準拠モードが有効になっている場合は、ドキュメントの表示方法が Internet Explorer の将来のバージョンでは異なる場合があります。このモードは、CD-ROM に保存されているコンテンツなど、事実上固定されているコンテンツには使用しないでください。


追加情報

CSS1 Test Suite

Compatibility in Internet Explorer 5.5

Measuring Element Dimension and Location

Positioning

Lance Silver は、Windows Client SDK チームのプログラマー兼ライターです。彼は、仕事中は編集者、開発者、テスト担当者、プログラム マネージャに厳しい注文を出しますが、仕事を離れると、子供たちを連れてノースウェストにある素晴らしい眺めの川へサケやニジマスを釣りに行きます (仕事仲間は、彼にできるだけ釣りをしていてくれ、と願っています...)。



Microsoft