属性名 | display |
---|---|
値 | none | inline | block | list-item | inline-block | 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 | flex | inline-flex | <template> |
初期値 | inline |
適用可能要素 | すべての要素 |
継承 | 継承しない |
メディア | visual |
アニメーション | 不可 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari | |
---|---|---|---|---|---|---|
none inline block | CSS1 | 4 | 1 | 1 | 7 | 1 |
list-item | CSS1 | 6 | 1 | 1 | 7 | 1 |
inline-block | CSS2 | 5.5 | 3 | 1 | 7 | 1 |
table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption | CSS2 | 8 | 1 | 1 | 7 | 1 |
inline-table | CSS2 | 8 | 3 | 1 | 7 | 1 |
run-in compact | CSS3 (Box) | 8 | ? | 1(*1) 4 32で削除 | 7 | 1(*1) 5 |
ruby ruby-base ruby-text ruby-base-group ruby-text-group ruby-base-container ruby-text-container | CSS3 (Box) | 11? | 34 | 未 | 未 | ? |
flex inline-flex | CSS3 (Flexbox) | - | 20 | 21(-webkit) | 12.5 | - |
*1 インライン要素よりも前に配置できない。
要素をどのような形式で表示するかを指定します。
値 | 説明 |
---|---|
none | ボックスが生成されず、何も表示されません。 |
inline | インラインボックスとして表示します。 |
block | ブロックボックスとして表示します。 |
list-item | リストアイテムとして表示します。 |
inline-block | インラインボックスの様に前後で改行されず、ブロックボックスの様に高さ、横幅を指定可能なボックス |
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 ruby-base-conainer | ルビベースグループ。rbc 要素に該当します。CSS basic box model (2007-08-09) では ruby-base-group として定義されていますが、CSS Ruby Layout Module Level 1 (2014.08.05) では、ruby-base-container に名称変更されています。 |
ruby-text-group ruby-text-container | ルビテキストグループ。rtc 要素に該当します。CSS basic box model (2007-08-09) では ruby-text-group として定義されていますが、CSS Ruby Layout Module Level 1 (2014.08.05) では、ruby-text-container に名称変更されています。 |
flex | フレックスコンテナとして表示します。詳細は flex を参照してください。 |
inline-flex | インラインのフレックスコンテナとして表示します。詳細は flex を参照してください。 |
<template> | CSS3 Advanced Layout Module(Working draft) で検討されていましたが、最新仕様の CSS Template Layout Module(Working Group Note) では grid や inline-grid と併用する形式に変更されています。 |
下記の例では、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" alt="" 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>
後続の要素が回り込みや絶対配置されていないブロックボックスであれば、そのブロックボックス内の最初のインラインボックスであるかのように表示されます。
<h4 style="display:run-in; font-size:12pt; text-decoration:underline; margin-right:3px;">run-in</h4> <p>後続の要素が回り込みや絶対配置されていないブロックボックスであれば・・・</p>
※ 未対応ブラウザが多いため run-in を用いずに擬似的に表示しています。
後続の要素が回り込みや絶対配置されていないブロックボックスであり、後続要素の左マージンの範囲に収まればその箇所に、収まらなければ通常のブロックボックスとして表示されます。Opera 11.6 で動作を確認しています。IE9, Firefox 12, Chrome 18, Safari 5.1 ではまだサポートされていません。
<h4 style="display:compact; font-size:12pt; text-decoration:underline;">compact</h4> <p style="margin-left:100px">後続の要素が回り込みや絶対配置されていないブロックボックスであり・・・</p>
compact | 後続の要素が回り込みや絶対配置されていないブロックボックスであり・・・ |
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 |
画面を縦に分割するなどのフレックスコンテナとして表示します。flex-flow や flex を参照してください。
.flexbox { display: flex; } .flexbox > div { flex: 1; text-align: center; height: 30px; border: 1px solid #999; background-color: #cfc; }
<div class="flexbox"> <div>A</div> <div>B</div> <div>C</div> </div>