CSS3 Pre-Reference



display

ボックスの種類

試す

動く例示が難しいので、いったん無しにします。

コメントする


対応ブラウザ

Firefox
すべて
Chrome/Safari
すべて
Opera
すべて
InternetExplorer
すべて

パラメータ

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 | normal | <テンプレート> | none
初期値 inline
適用 すべての要素、::before、::after、::alternate、::outside疑似要素
継承 しない
レベル 1-
%の解釈 -
適用メディア Visual
参考文献 CSS basic box model#4.1. The ‘display’ property

解説

ボックスの種類を指定します。

ボックスの種類のキーワードは以下:

inline
インラインボックス
block
ブロックボックス
inline-block
一つのインラインボックスのようなブロックボックスです。画像やフォーム部品などのようなものです。ボックス内部はブロックボックスとして扱われますが、ボックス外部はインラインボックスとして扱われます。
list-item
マーカーボックスを伴うブロックボックスです。
run-in
ランインボックスです。ランインボックスは後続するボックスがブロックボックスの場合は、ブロックボックス内の最初のインラインボックスとして整形され、それ以外の場合は通常のブロックボックスとして整形されます。
compact
コンパクトボックスです。後続のボックスの開始点の余白が、そのボックスが収まるのに十分な場合は余白内にボックスを収め、収まらない場合は通常のブロックボックスとして表示します。ボックスの詳細については、どうやらCSS2の時より厳密なものになるようですが、議論中です。
table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption
テーブルの各ボックスを生成します。それぞれテーブル(<ruby>)、インラインブロックのテーブル(該当無し)、行グループ(<rowgroup>)、ヘッダーグループ(<thead>)、フッターグループ(<tfoot>)、行(<tr>)、列グループ(<colgroup>)、列(<col>)、セル(<th>・<td>)、キャプション(<caption>)です。
ruby, ruby-base, ruby-text, ruby-base-group, ruby-text-group
それぞれルビの当該ボックスを生成します。それぞれルビの範囲(<ruby>)、ベース(<rb>)、テキスト(<rt>)、ベースのグルーピング(<rbc>)、テキストのグルーピング(<rtc>)です。
<テンプレート>
テンプレート名を指定します。
none
ボックスを生成しません。この値はVisualメディアだけでなくすべてのメディアに影響します。つまり、Auralメディアでは発音されません。
normal
CSS3で追加された値です。
普通の要素、::before, ::after疑似要素では、'inline'と解釈されます。
::alternate疑似要素では、親要素が'footnote', 'endnote', or 'section-note'プロパティを使用している場合は'list-item'、それ以外の場合は'block'として解釈されます。
::outside疑似要素の場合は、'none'と解釈されます。ただし、本体の要素まで消えるのではなく、::outside疑似要素が無いかのように振る舞います。

CSS3では、テンプレートをこのプロパティで定義し、"position"プロパティで各要素を、そのどの位置に表示するかを指定することが可能になります。が、どうも別のプロパティになるような気がします。
詳細は、CSS Template Layout ModuleのWDを参照ください。 

また、::before, ::after, ::alternate、::outside4つの生成要素に対してすべての値が許容されるようになりました。

トラックバック

投稿されたコメント