| 属性名 | display |
|---|---|
| 値 | inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | <template> | none |
| 初期値 | inline |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| メディア | Visual / Box |
| サポート | C1 / e5 / N4 / Fx1 / Ch1 / Op7 / Sa1 |
要素をどのような形式で表示するかを指定します。
| 値 | 説明 |
|---|---|
| inline | インラインボックスとして表示します。 |
| block | ブロックボックスとして表示します。 |
| inline-block | インラインボックスの様に前後で改行されず、ブロックボックスの様に高さ、横幅を指定可能なボックス |
| list-item | リストアイテム |
| run-in | 状況に応じて、後続のブロックの先頭インライン要素になります。 |
| compact | 状況に応じて、後続のブロックの左余白に表示されるボックスになります。 |
| table | テーブル要素。table要素に該当 |
| table-row-group | テーブルの列グループ。tbody要素に該当 |
| table-header-group | テーブルのヘッダグループ。thead要素に該当 |
| table-footer-group | テーブルのフッタグループ。tfoot要素に該当 |
| table-row | テーブルの列。tr要素に該当 |
| table-column-group | テーブルの行グループ。colgroup要素に該当 |
| table-column | テーブルの行。col要素に該当 |
| table-cell | テーブルのセル。th要素、td要素に該当 |
| table-caption | テーブルのキャプション。caption要素に該当 |
| inline-table | インラインテーブル |
| ruby | ルビ。ruby要素に該当 |
| ruby-base | ルビベース。rb要素に該当 |
| ruby-text | ルビテキスト。rt要素に該当 |
| ruby-base-group | ルビベースグループ。rbc要素に該当 |
| ruby-text-group | ルビテキストグループ。rtc要素に該当 |
| <template> | XXX |
| none | ボックスが生成されず、何も表示されない。 |
下記の例では、div要素をインラインボックスとして横に並べて表示しています。
<div style="display:inline; color:#ffffff; background:#333333; padding:5px">CSSとは</div> <div style="display:inline; color:#ffffff; background:#333333; padding:5px">CSSとは</div> <div style="display:inline; color:#ffffff; background:#333333; padding:5px">CSSとは</div>
下記の例では、img要素をブロックボックスとして改行して表示しています。
<img src="../image/back.gif" style="display:block"> あいうえお・・・
下記の例では、span要素に高さ、横幅を指定しています。
あいうえお <span style="display:inline-block; width:100px; height:20px; background:#ccccff; border:1px solid gray;">かきくけこ</span> さしすせそ
リストアイテム(li要素)のように表示します。
<div style="margin-left:2em"> <div style="display:list-item">HTML</div> <div style="display:list-item">CSS</div> </div>
後続の要素が回り込みや絶対配置されていないブロックボックスであれば、そのブロックボックス内の最初のインラインボックスであるかのように表示されます。IE9, Chrome 18, Opera 11.6, Safari 5.1 で動作を確認しています。Firefox 12 ではまだサポートされていません。
<h5 style="display:run-in; margin-right:5px; background:#c99; padding:0 5px">run-in とは</h5> <p>後続の要素が回り込みや絶対配置されていないブロックボックスであれば・・・</p>
後続の要素が回り込みや絶対配置されていないブロックボックスであれば・・・
後続の要素が回り込みや絶対配置されていないブロックボックスであり、後続要素の左マージンの範囲に収まればその箇所に、収まらなければ通常のブロックボックスとして表示されます。Opera 11.6 で動作を確認しています。IE9, Firefox 12, Chrome 18, Safari 5.1 ではまだサポートされていません。
<h5 style="display:compact; margin-right:5px; background:#c99; padding:0 5px">compact とは</h5> <p style="margin-left:120px">後続の要素が回り込みや絶対配置されていないブロックボックスであり・・・・・</p>
後続の要素が回り込みや絶対配置されていないブロックボックスであり・・・・・
div要素などを、テーブルを構成する要素として扱うことが可能です。
<style>
.table { display:table; border-collapse:collapse; }
.caption { display:table-caption; text-align:center; font-weight:bold; }
.tr { display:table-row; }
.td { display:table-cell; border:1px solid gray; width:100px; text-align:center; }
</style>
<div class="table">
<div class="caption">Table.A</div>
<div class="tr">
<div class="td">AAA</div>
<div class="td">BBB</div>
<div class="td">CCC</div>
</div>
<div class="tr">
<div class="td">AAA</div>
<div class="td">BBB</div>
<div class="td">CCC</div>
</div>
</div>
インライン要素の様に、横方向に並ぶテーブルを表示することができます。
<style>
.inline-table { display:inline-table; border-collapse: collapse; }
.inline-table td { border: 1px solid gray; }
</style>
<table class="inline-table">
<caption>Table.A</caption>
<tr><td>AAA</td><td>BBB</td></tr>
<tr><td>CCC</td><td>DDD</td></tr>
</table>
<table class="inline-table">
<caption>Table.B</caption>
<tr><td>EEE</td><td>FFF</td></tr>
<tr><td>GGG</td><td>HHH</td></tr>
</table>
| AAA | BBB |
| CCC | DDD |
| EEE | FFF |
| GGG | HHH |