CSS3

プロパティ

display

→●、mdn

要素の表示型。

display プロパティは、要素の表示型（display type）を定義する。表示型は、要素がどのようなボックスを生成するかについての、二つの基本的性質からなる：

• 内縁表示型（ inner display type ）

  （置換されない）要素が生成する整形文脈の種類を定義し、その子孫ボックスをどうレイアウトするかを指示する。（置換される要素の内縁表示型は、CSS の視野から外れる。）

  【“～レイアウト”（例：“フレックス レイアウト”）と記されたときは、概ね、この表示型を指している。】

• 外縁表示型（ outer display type ）

  要素が生成する主要ボックス自身がフロー レイアウトにどう関与するかを規定する。

  【“［行内／ブロック］レベルのボックス（あるいは要素、内容）”と記されたときは、この表示型を指している。】

テキスト連なりには、表示型は無い。

一部の display 値には、追加の副作用が伴われる： 例えば list-item は ::marker 疑似要素も生成し、none は 要素の下位ツリーをまるごとボックスツリーから外す。

display プロパティによる要素の意味論に対する効果は無い。意味論は、文書言語により定義され、CSS からは影響されない。値 none は別として（それは、聴覚／発話 [CSS-SPEECH-1] の出力や、要素、その子孫の対話性にも影響する）、display プロパティが影響するのは、視覚レイアウトに限られる。その目的は、［下層文書の意味論に影響することなく 要素のレイアウトのふるまいを変更する］自由を、設計者に与えることにある。

各種 値は、次に従って定義される：

<display-outside> <display-inside>

<display-outside> 値が指定されつつ、<display-inside> は省略された場合、要素の内縁表示型は、flow が既定になる。

<display-inside> 値が指定されつつ、<display-outside> は省略された場合、要素の外縁表示型は block が既定になる ─ ただし、ruby に対しては inline が既定になる。

<display-outside>

＝block
| inline
| run-in

<display-inside>

＝flow
| flow-root
| table
| flex
| grid
| ruby

<display-listitem>

＝<display-outside>? && [ flow | flow-root ]? && list-item

<display-internal>

＝table-row-group
| table-header-group
| table-footer-group
| table-row
| table-cell
| table-column-group
| table-column
| table-caption
| ruby-base
| ruby-text
| ruby-base-container
| ruby-text-container

table や ruby などの一部のレイアウト モデルでは、その［子や子孫］たちがいくつか異なる役割を担うような、複雑な内部構造を有する。この節では、この種の display 値を定義する ─ この種の値による表示型は“レイアウト内部”とも称され、そのようなある特定のレイアウト モードの中でのみ意味を持つ⁽¹⁾。

1：【その種のレイアウト モードの外で用いられた場合の取り扱いは、§ ボックス型の自動的な変形に見出せる。】

他が指定されない限り、これらの display 値を利用している要素の［内縁表示型／外縁表示型］は、所与のキーワードに設定される。

<display-internal> を成す各キーワードは、以下に従って定義される：

table-row-group、table-header-group、table-footer-group、table-row、table-cell、table-column-group、table-column

要素は 内部テーブル要素（internal table element）になる。それは、適切な内部テーブル ボックスを生成して、テーブル整形文脈に関与する。[CSS2] § CSS テーブル モデルを見よ。

table-cell の内縁表示型は、flow-root になる。

table-caption

要素は テーブル キャプション ボックス（table caption box）を生成する。それは、ブロック ボックスであり、テーブル／テーブル包装ボックスに関して特別にふるまう。[CSS2] § CSS テーブル モデル を見よ。

table-caption ボックスの内縁表示型は、flow-root になる。

ruby-base、ruby-text、ruby-base-container、ruby-text-container

要素は内部ルビ要素（internal ruby element）になる。それは、適切な 内部ルビ ボックスを生成して、ルビ整形文脈に関与する。[CSS3RUBY]

ruby-base、ruby-text の内縁表示型は、flow になる。

<display-box>

＝contents | none

<display-legacy>

＝inline-block | inline-table | inline-flex | inline-grid

次の一覧（参考）に、各種 display 値を要約する：

注記： 等価な display 値の直列化においては、“最も後方互換、次に最短”による優先順位に則って、“短い表記”の列を利用する [CSSOM]

以下のCSSが組み込んであります：

none

要素とその子孫はボックスもテキスト連なりも生成しない。

開始<SPAN style="border:1px solid red;
 display:none;
">テスト</SPAN>終了

なにも表示されなくなる

開始<DIV style="border:1px solid red;
 display:none;
">テスト</DIV>終了

なにも表示されなくなる

contents

要素自身はボックスを全く生成しないが、要素の［一連の子、および疑似要素］は、依然として［ボックスやテキスト連なり］たちを通常どおり生成する。ボックス生成／レイアウト、の目的においては、要素は、要素ツリーにおいて 要素の内容に置換されたかのように扱うものとする（元の文書ツリーにおける要素の子たちのみならず、要素を出自にする疑似要素 ─ 前後に生成される ::before、::after 疑似要素など ─ も含め）。

開始<DIV style="border:1px solid red;
 display:contents;
">テスト</DIV>終了

¶

開始<DIV class=T_contents style="border:1px solid red;
">テスト</DIV>終了

¶

注記： 影響されるのはボックスツリーに限られ、［選択子の照合／イベントの取り扱い／プロパティの継承］などの文書ツリーに基づく意味論は、影響されない。…はずであるが、これを書いた時点では、主要なブラウザは正しく実装していない（課題 #3040）。この特能を Web 上で利用するときは、ケアを要する ─ アクセス能ツールが要素の意味論にアクセスできなくなり得るので。

この値は、［置換される要素／具現化において CSS からは制御されない部分がある他の要素（一部のフォームコントロールなど）］に対しては、display: none に算出される。詳細は通例でない要素上の display: contents の効果 を見よ。

注記： 置換要素やフォームコントロールが特別に扱われるわけは、要素が生成する自前のボックスだけ除去する演算を完全には定義できないためである。このふるまいは、利用事例（および より精確な具現化モデル）が開発されたときは精緻化され得る。前方互換性を得るため、作者は、そのような要素の display には contents に代えて none を利用するべきである。

block

要素はボックスを生成し、フロー レイアウト内に配置されたときには ブロック レベルのボックス（block-level box）になる。[CSS2]

開始<SPAN style="border:1px solid red; width:100px; height:70px;
 display:block;
">SPAN<BR>要素</SPAN>終了

flow-root

要素は：

• ブロック コンテナ ボックスを生成する。
• フロー レイアウトを利用して自身の内容をレイアウトする。
• 自身の内容に対し、常に，新たなブロック整形文脈を確立する。

[CSS2]

開始<SPAN style="border:1px solid red; width:100px; height:70px;
 display:flow-root;
">SPAN<BR>要素</SPAN>終了

これだけでは意味を成さないようだ

<DIV style="border:1px solid black; width:150px;
 font-size:20px;
">
 <SPAN style="border:1px solid red; width:90px;
  display:flow-root;
 ">SPAN<BR>要素</SPAN>
 あああああああああああああああああ
</DIV>

inline

要素はボックスを生成し、フロー レイアウト内に配置されたときには行内レベルのボックス（inline-level box）になる。[CSS2]

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:inline;
">SPAN<BR>要素</SPAN>終了

width、heightなどは効かない。

inline-block

「inline flow-root」としてふるまう。

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:inline-block;
">SPAN<BR>要素</SPAN>終了

run-in

要素は、同行見出しボックスを生成する。それは、特別なふるまいを伴う行内レベルのボックスの一種であり、自身を、後続のブロック コンテナの中に併合させようと試みる。詳細は、§ 同行見出しレイアウトに。

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:run-in;
">SPAN<BR>要素</SPAN>終了

¶

list-item

［その list-style プロパティで指定される内容を伴う ::marker 疑似要素 [CSS-PSEUDO-4]］を要素に生成させる（[CSS2] § リスト） ─ 自前の内容用には、指定された型の主要ボックスを生成するとともに。

内縁表示型を与える値が指定されていない場合、主要ボックスの内縁表示型は、flow が既定になる。外縁表示型を与える値が指定されていない場合、主要ボックスの外縁表示型は、block が既定になる。

注記： このレベルでは、文法にて制約されるため、list-item 用の表示型は、フロー レイアウト用のそれ ─ 外縁表示型は［block／inline／run-in］かつ、内縁表示型は［flow／flow-root］（順不同） ─ に制限される。この制約は、このモジュールの将来レベルでは、緩められるかもしれない。

開始<SPAN style="border:1px solid red;
 display:list-item;
">SPAN要素</SPAN>終了

<OL>OL要素
 <SPAN style="display:list-item; border:1px solid red">SPAN要素</SPAN>
 <SPAN style="display:list-item; border:1px solid red">SPAN要素</SPAN>
</OL>

inline list-item

開始<SPAN style="border:1px solid red;
 display:inline list-item;
">SPAN要素</SPAN>終了

¶

<OL>OL要素
 <SPAN style="display:inline list-item; border:1px solid red">SPAN要素</SPAN>
 <SPAN style="display:inline list-item; border:1px solid red">SPAN要素</SPAN>
</OL>

¶

flex

要素は、主要ボックスとして、フレックス コンテナ ボックスを生成する ─ それは、フレックス整形文脈を確立する。[CSS3-FLEXBOX]

<DIV style="border:1px solid red; width:200px; height:100px;
 display:flex; flex-wrap:wrap;
">
 <DIV style="border:1px solid black">DIV１</DIV>
 <DIV style="border:1px solid black">DIV２</DIV>
 <DIV style="border:1px solid black">DIV３</DIV>
 <SPAN style="border:1px solid black">SPAN４</SPAN>
</DIV>

inline-flex

「inline flex」としてふるまう。

<DIV style="border:1px solid red; width:200px; height:100px;
 display:inline-flex; flex-wrap:wrap;
">
 <DIV style="border:1px solid black">DIV１</DIV>
 <DIV style="border:1px solid black">DIV２</DIV>
 <DIV style="border:1px solid black">DIV３</DIV>
 <SPAN style="border:1px solid black">SPAN４</SPAN>
</DIV>

¶意味なさそう。

grid

要素は、主要ボックスとして、格子コンテナ ボックスを生成する ─ それは、格子整形文脈を確立する。[CSS-GRID-1]

（subgrid を利用している格子【下位格子】は、新たな格子整形文脈を生成しないこともある ─ 詳細は [CSS-GRID-2] を見よ。）

<DIV style="border:1px solid red;
 display:grid;
 grid-template:50px 70px/50px 70px 90px;
">
 <DIV style="border:1px solid black">DIV１</DIV>
 <DIV style="border:1px solid black">DIV２</DIV>
 <DIV style="border:1px solid black">DIV３</DIV>
 <DIV style="border:1px solid black">DIV４</DIV>
</DIV>

<DIV style="border:1px solid red; width:250px; height:150px;
 display:grid;
 grid-template:50px 70px/50px 70px 90px;
">
 <DIV style="border:1px solid black">DIV１</DIV>
 <DIV style="border:1px solid black">DIV２</DIV>
 <DIV style="border:1px solid black">DIV３</DIV>
 <SPAN style="border:1px solid black">SPAN４</SPAN>
</DIV>

<DIV style="border:1px solid red; width:250px; height:150px;
 display:grid;
 grid-template:'a b c' 50px
	'd e f' 70px/50px 70px 90px;
">
 <DIV style="border:1px solid black">DIV１</DIV>
 <DIV style="border:1px solid black">DIV２</DIV>
 <DIV style="border:1px solid black">DIV３</DIV>
 <SPAN style="border:1px solid black">SPAN４</SPAN>
</DIV>

inline-grid

「inline grid」としてふるまう。

<DIV style="border:1px solid red; width:250px; height:150px;
 display:inline-grid;
 grid-template:50px 70px/50px 70px 90px;
">
 <DIV style="border:1px solid black">DIV１</DIV>
 <DIV style="border:1px solid black">DIV２</DIV>
 <DIV style="border:1px solid black">DIV３</DIV>
 <SPAN style="border:1px solid black">SPAN４</SPAN>
</DIV>

¶

ruby

要素は、ルビ コンテナ ボックスを生成し、ボックスはルビ整形文脈 を確立する。加えて、その基底レベルの内容は、［ボックスは行内であるならば、親の整形文脈／他の場合は 適切な外縁表示型の包装ボックス］の中に統合される。[CSS-RUBY-1]

開始<SPAN style="border:1px solid red;
 display:ruby;
">SPAN要素<RT>RT</RT></SPAN>終了

¶

block ruby

開始<SPAN style="border:1px solid red;
 display:block ruby;
">SPAN要素<RT>RT</RT></SPAN>終了

¶

table

要素は、主要ボックスとして、テーブル包装ボックスを生成する ─ それは、ブロック整形文脈を確立し、追加で生成されるテーブル格子ボックスを包含する。[CSS2]

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:table;
">SPAN<BR>要素</SPAN>終了

inline-table

「inline table」としてふるまう。

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:inline-table;
">SPAN<BR>要素</SPAN>終了

table-row-group

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:table-row-group;
">SPAN<BR>要素</SPAN>終了

¶

<TABLE>
 <TR><TD>TD1<TD>TD</TR>
 <SPAN style="border:1px solid red;
  display:table-row-group;
 ">
  <TR><TD>TD2<TD>TD</TR>
  <TR><TD>TD3<TD>TD</TR>
 </SPAN>
 <TR><TD>TD4<TD>TD</TR>
</TABLE>

¶単なるグループ化？

table-header-group

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:table-header-group;
">SPAN<BR>要素</SPAN>終了

<TABLE>
 <TR><TD>TD1<TD>TD</TR>
 <SPAN style="border:1px solid red;
  display:table-header-group;
 ">
  <TR><TD>TD2<TD>TD</TR>
  <TR><TD>TD3<TD>TD</TR>
 </SPAN>
 <TR><TD>TD4<TD>TD</TR>
</TABLE>

¶単なるグループ化？。HEADER要素の代わりにはならない。

table-footer-group

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:table-footer-group;
">SPAN<BR>要素</SPAN>終了

¶

<TABLE>
 <TR><TD>TD1<TD>TD</TR>
 <SPAN style="border:1px solid red;
  display:table-footer-group;
 ">
  <TR><TD>TD2<TD>TD</TR>
  <TR><TD>TD3<TD>TD</TR>
 </SPAN>
 <TR><TD>TD4<TD>TD</TR>
</TABLE>

¶単なるグループ化？。FOOTER要素の代わりにはならない。

table-row

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:table-row;
">SPAN<BR>要素</SPAN>終了

¶

<TABLE>
 <TR><TD>TD1<TD>TD</TR>
 <SPAN style="border:1px solid red; color:red;
  display:table-row;
 ">
   <TD>TD2<TD>TD</TD>
 </SPAN>
 <TR><TD>TD3<TD>TD</TR>
</TABLE>

¶TR要素の役目になはるが。良い効果ではない。

table-cell

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:table-cell;
">SPAN<BR>要素</SPAN>終了

¶

<TABLE>
 <TR><TD>TD1<TD>TD</TR>
 <TR>
  <SPAN style="border:1px solid red; color:red;
   display:table-cell;
  ">TD2</SPAN><TD>TD</TD>
 </TR>
 <TR><TD>TD3<TD>TD</TR>
</TABLE>

¶TD要素の役目にはならない。

table-column-group

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:table-column-group;
">SPAN<BR>要素</SPAN>終了

¶

<TABLE>
 <SPAN style="background-color:pink;
  display:table-column-group;
 "><COL><COL></SPAN><COLGROUP style="background-color:green;"><COL></COLGROUP>
 <TR><TD>TD1<TD>TD<TD>TD
 <TR><TD>TD2<TD>TD<TD>TD
</TABLE>

¶COLGROUP要素の役目には、なりそうでならない。

table-column

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:table-column;
">SPAN<BR>要素</SPAN>終了

¶

<TABLE>
 <SPAN style="background-color:pink;
  display:table-column;
 ">/SPAN><COL style="background-color:yellow">
 <TR><TD>TD1<TD>TD<TD>TD
 <TR><TD>TD2<TD>TD<TD>TD
</TABLE>

¶COL要素の役目にはならない。

table-caption

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:table-caption;
">SPAN<BR>要素</SPAN>終了

¶

<TABLE>
 <SPAN style="background-color:pink;
  display:table-caption;
 ">あいう</SPAN>
 <TR><TD>TD1<TD>TD<TD>TD
 <TR><TD>TD2<TD>TD<TD>TD
</TABLE>

¶役に立たない。

ruby-base

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:ruby-base;
">SPAN<BR>要素</SPAN>終了

¶

ruby-text

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:ruby-text;
">SPAN<BR>要素</SPAN>終了

¶

開始<RUBY><SPAN style="border:1px solid red;
 display:ruby-text;
">SPAN</SPAN></RUBY>終了

¶RT要素の代わりにはならない。

ruby-base-container

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:ruby-base-container;
">SPAN<BR>要素</SPAN>終了

¶

ruby-text-container

開始<SPAN style="border:1px solid red; width:90px; height:70px;
 display:ruby-text-container;
">SPAN<BR>要素</SPAN>終了

¶

flow

要素は、自身の内容を フロー レイアウト（ブロック＆行内レイアウト）を利用してレイアウトする。

【概ね、内容を、互いが重なり合わないように、できるだけ詰めながら、文書内に現れる順に、要素が生成するボックスの中に“流し込む（ flow する）”。】

要素が生成するボックスは：

• 要素の外縁表示型が［ inline／run-in］であって、要素は［ブロック整形文脈／行内整形文脈］（順不同）に関与しているならば、行内ボックスになる。
• 他の場合、ブロック コンテナ ボックスになる。

他のプロパティ（position、float、overflow など）の値、および自身が［ブロック整形文脈、行内整形文脈］どちらに関与しているかに依存して、要素は、自身の内容用に新たなブロック整形文脈を確立するか、または自身の内容を親の整形文脈に統合する。[CSS2] § 視覚整形モデルを見よ。新たなブロック整形文脈を確立するブロック コンテナの使用内縁表示型は、flow-root になるものと見なされる。

<DIV style="border:1px solid black; width:150px;">
 <SPAN style="border:1px solid red; width:100px; height:70px;
  display:flow;
 ">SPAN要素</SPAN>あああああああああああ
</DIV>

¶

<DIV style="border:1px solid black; width:150px;">
 <SPAN style="border:1px solid red; width:100px; height:70px;
  display:block flow;
 ">SPAN要素</SPAN>あああああああああああ
</DIV>

¶

テスト