CSS3

プロパティ

display

→●、mdn

要素の表示型。

block

この値は、要素にブロック ボックスを生成させる。

開始<SPAN style="border:1px solid red; width:100px; height:70px;
 display:block;
">テスト<BR>です</SPAN>終了

inline-block

この値は、要素に行内レベルのブロック コンテナを生成させる。inline-block の内側は、ブロック ボックスとして整形される一方で、要素それ自身は不可分な行内として整形される。

開始<SPAN style="border:1px solid red; width:100px; height:70px;
 display:inline-block;
">テスト<BR>です</SPAN>終了

inline

この値は、要素に一つ以上の行内ボックスを生成させる。

開始<SPAN style="border:1px solid red; width:100px; height:70px;
 display:inline;
">テスト<BR>です</SPAN>終了

list-item

この値は、要素に主要ブロック ボックスに加えて、マーカー ボックスも生成させる（例： HTML の LI ）。リストについて、および その整形の例については、§ リスト を参照。

開始<SPAN style="border:1px solid red; width:100px; height:70px;
 display:list-item;
">テスト<BR>です</SPAN>終了

none

この値は、要素を整形構造に現れなくさせる（すなわち、視覚媒体においては、要素は、ボックスを生成せず、レイアウトに効果は及ばなくなる）。要素のどの子孫も、ボックスを生成しなくなり、要素とその内容は、整形構造から全面的に除去される。子孫に display プロパティを設定しても、このふるまいが上書きされることはない。

display 値 none は、不可視ボックスを作成するものではないことに注意。それはボックスを全く作成させなくする。CSS には、要素が［整形に影響しつつ、それ自身は可視でない【透明な】ボックス］を整形構造内に生成する仕組みも用意されている。詳細は § 可視性 を参照。

開始<SPAN style="border:1px solid red; width:100px; height:70px;
 display:none;
">テスト<BR>です</SPAN>終了

table

要素を table 要素の様にふるまわせる。

開始<SPAN style="border:1px solid red; width:100px; height:70px;
 display:table;
">テスト<BR>です</SPAN>終了

inline-table

要素を 行内レベルの table 要素の様にふるまわせる。

開始<SPAN style="border:1px solid red; width:100px; height:70px;
 display:inline-table;
">テスト<BR>です</SPAN>終了

<table-＊>

＝table-row-group
| table-header-group
| table-footer-group
| table-row
| table-column-group
| table-column
| table-cell
| table-caption

これらの値は、要素を table 要素の様にふるまわせる（§ テーブル に述べられる制約の対象になる）。

これらの値の意味は、テーブルモデル にて定義される。

【この <table-＊> は、他から簡潔に参照できるよう、訳者が導入した非公式な値型である（これらの値は、テーブル整形文脈により統制されるボックスを生成させる）。】

table-row-group

<TABLE>
 <TR><TD>TR１：TD要素<TD>TD要素
 <SPAN style="border:1px solid red; color:red;
  display:table-row-group;
 ">
 <TR><TD>TR２：TD要素<TD>TD要素
 <TR><TD>TR３：TD要素<TD>TD要素
 </SPAN>
</TABLE>

¶

table-header-group

<TABLE>
 <TR><TD>TR１：TD要素<TD>TD要素
 <SPAN style="display:table-header-group; color:red">
  <TR><TD>TR２：TD要素<TD>TD要素</TR>
 </SPAN>
 <TR><TD>TR３：TD要素<TD>TD要素
</TABLE>

¶

table-footer-group

<TABLE>
 <SPAN style="display:table-footer-group; color:red">
  <TR><TD>TR１：TD要素<TD>TD要素
 </SPAN>
 <TR><TD>TR２：TD要素<TD>TD要素
 <TR><TD>TR３：TD要素<TD>TD要素
</TABLE>

¶

table-row

<TABLE>
 <SPAN style="display:table-row; color:red">
  <TD>行１：TD要素<TD>TD要素
 </SPAN>
 <TR><TD>TR２：TD要素<TD>TD要素
 <TR><TD>TR３：TD要素<TD>TD要素
</TABLE>

¶

table-column-group

<TABLE>
 <SPAN style="display:table-column-group; color:red"><COL><COL></SPAN><COL>
 <TR><TD>TR１：TD要素1<TD>TD要素2<TD>TD要素3
 <TR><TD>TR２：TD要素1<TD>TD要素2<TD>TD要素3
</TABLE>

¶

table-column

<TABLE>
 <SPAN style="display:table-column; color:red"></SPAN><COL style="color:blue"><COL>
 <TR><TD>TR１：TD要素1<TD>TD要素2<TD>TD要素3
 <TR><TD>TR２：TD要素1<TD>TD要素2<TD>TD要素3
</TABLE>

¶

table-cell

<TABLE>
 <TR>
  <TD>TR１：TD要素1</TD>
  <SPAN style="display:table-cell; color:red">TD要素2</SPAN>
  <TD>TD要素3</TD>
 <TR><TD>TR２：TD要素1<TD>TD要素2<TD>TD要素3
</TABLE>

¶実際のセルにはならないようだ。

table-caption

<TABLE style="margin:1em; border:1px solid #000">
 <SPAN style="display:table-caption; color:red">キャプション</SPAN>
 <TR><TD>TR１：TD要素1<TD>TD要素2
 <TR><TD>TR２：TD要素1<TD>TD要素2
</TABLE>

¶

<TABLE style="margin:1em; border:1px solid #000">
 <CAPTION style="color:red">キャプション</CAPTION>
 <TR><TD>TR１：TD要素1<TD>TD要素2
 <TR><TD>TR２：TD要素1<TD>TD要素2
</TABLE>

算出値は、指定値と同じになる ― ただし、有位置な要素、浮動要素、根要素に対する場合は除く： display、position、float の関係性 を見よ。

display の初期値は inline とされているが、多くの要素に対し、この値はユーザー エージェントの 既定のスタイルシート による規則で上書きされ得ることに注意。付録の HTML 4 用の スタイルシートの見本 を見よ。【現在においては、HTML 仕様（WHATWG）に定義されるユーザー エージェント スタイルシート】

関連

HTML5：hidden属性。

テスト