IE8が対応したCSS 2.1の機能：displayプロパティなど3種類を解説

　今回は、IE8が対応した次の3つのプロパティについて確認していきたい。

• display
• list-style-type
• white-space

　これらのプロパティには古いIEも対応しているが、CSS 2.1で定義されたすべての値に対応していたわけではなかった。IE8では定義された値を一通りサポートするようになっている。そこで、今回はこれらのプロパティの値のうち、IE8が新しくサポートしたものについて確認していきたい。

　なお、新しく対応した機能を利用するにはIE8のStandardsモード（標準準拠モード）で表示する必要がある。Standardsモードや互換表示ボタンについては第2回の記事「IE8のレンダリングモードと互換表示」を参照してほしい。

displayプロパティ

　IE8はdisplayプロパティの値のうち、古いIEで未対応だったrun-inとinline-block、テーブル関連の値に対応した。ここでは、それぞれの値についてどのように対応したかを確認していきたい。

　なお、displayプロパティについて詳しくは「Firefox 3が対応したdisplayプロパティの値（1）」を参照してほしい。

run-in

　「display:run-in」と指定するとrun-inボックスを構成し、後に続くblockボックスに含めて表示される。

サンプル1

dt{
display: run-in;
border: solid 2px red;
}

dd{
margin-left: 100px;
background-color: yellow;
}

挨拶
「おはよう」「こんにちは」「こんばんは」「おやすみ」など。

※ブラウザで表示を確認する

inline-block

　「display:inline-block」の指定は、古いIEでもインライン要素に適用した場合は機能していたが、IE8ではブロック要素に適用した場合も機能するようになった。

　たとえば、次のように「display:inline-block」と指定すると

でマークアップしたテキスト部分がinline-blockボックスとなる。inline-blockボックスにはwidthプロパティで横幅を指定することができるため、各テキストの横幅を揃えて横に並べて表示することができる。

サンプル2

div{
display: inline-block;
background-color: #00aaff;
width: 200px;
text-align: center;
padding: 5px;
}

おはよう
こんにちは

※ブラウザで表示を確認する

テーブル関連の値

　IE8はdisplayプロパティに用意されたテーブル関連の値に対応した。テーブル関連の値は以下の7種類となっている。

• table
• inline-table
• table-row
• table-cell
• table-row-group
• table-header-group
• table-footer-group

　たとえば、次のサンプルはキャプションも含めてすべて

でマークアップしたものだが、テーブル関連の値を適用することでテーブルとして表示することができる。

サンプル3

.table{
display: table;
border: solid 3px #00aaff;
}
 
.caption{
display: table-caption;
text-align: center;
}
 
.tr{
display: table-row
}
 
.td{
display: table-cell;
border: solid 2px #aaff00;
padding: 10px;
}
 
.thead{
display: table-header-group;
background-color: #ffffaa;
}

 
ひらがなの表
 


あ
い
う
え
お


…略…

※ブラウザで表示を確認する

　なお、テーブル関連の値について詳しくは「Firefox 3が対応したdisplayプロパティの値（3） - inline-table」を参照してほしい。

list-style-typeプロパティ

1 2 3 次のページへ ≫

• 関連情報(12件)

• MacBook Proに入れたWindows 7 RC1：プロセッサ構成の変更で体感速度が向上
• VMware Fusionで試すWindows 7 RC1
• Windows 7 RC版で確認できたAero関連の小ネタを2分ほどの動画にまとめてみた [From ZDNet Japan]
• Windows 7 RC版をちょっとだけ使ってみた--Vista以前と大きく変わったのはどこ？ [From ZDNet Japan]
• 所要時間約25分--一般公開が始まったWindows 7 RC版をサクっと入れてみた [From ZDNet Japan]
• 「Windows 7」RC版で加わった「IE 8」のタブハング報告機能 [From ZDNet Japan]
• Windows 7 RC 日本語版にまだ英語が残っている理由
• Vistaの轍は踏まない：Windows 7でエコシステムを変えたマイクロソフト [From ZDNet Japan]
• Windows 7をさらに良いものにするために--チューンアップ項目10個
• 日本マイクロソフト株式会社
• Microsoft Corp.
• エ・ビスコム・テック・ラボ

• ホワイトペーパー

• 3分で理解する企業セキュリティの要、サイバー攻撃対策で経営者が意識するべき3原則と重要10項目

• 急増するセキュリティ脅威、Google Cloud の多層防御がアプリケーションの安全維持を可能に

• テレワークで課題になるVPNによるアクセス遅延問題を解消、アクセスコントロールの活用ポイント

• アフターコロナの働き方 ―Google Workspaceの行動ログで作る経営ダッシュボードと改善法

• Azure Sentinelで実現するサイバーハイジーン

• 標的型攻撃にどう備えるべきか、注目集めるセキュリティ意識の向上と運用フローを整備するサービス

• 人気キーワード
• 経営
• セキュリティ
• クラウドコンピューティング
• 仮想化
• ビジネスアプリケーション
• モバイル