display
=======

**`display`** は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。

正式には、 **`display`** プロパティは要素の内側と外側の表示種別を設定します。外側の型は要素のフローレイアウトへの参加方法を設定し、内側の型は子要素のレイアウトを設定します。 `display` のいくつかの値は、それ自身の個別の仕様書で完全に定義されています。例えば、 `display: flex` が宣言されたときに何が起こるかの詳細は、 CSS Flexible Box Model 仕様書で定義されています。個々の仕様書については、この文書の最後にある表を参照してください。

試してみましょう
--------

構文
--

`display` プロパティは、キーワード値を使用して指定します。


```css
/\* 旧来の値 \*/
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/\* ボックスの生成 \*/
display: none;
display: contents;

/\* 2 値の構文 \*/
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/\* その他の値 \*/
display: table;
display: table-row; /\* すべての表の要素が同等の CSS display 値を持っています \*/
display: list-item;

/\* グローバル値 \*/
display: inherit;
display: initial;
display: revert;
display: unset;
```

値のグループ
------

キーワード値は 6 つの値のカテゴリーにグループ分けすることができます。

### 外側

`<display-outside>`

これらのキーワードは、本質的に要素のフローレイアウトにおける役割を表す、要素の外側の表示種別を指定します。

`block`

この要素はブロック要素のボックスを生成し、通常のフローでは要素の前後で改行を生成します。

`inline`

この要素は、自身の前後に改行を生成しない 1 つ以上のインライン要素ボックスを生成します。通常のフローでは、次の要素は、空間があれば同じ行になります。



**メモ:** 2 値構文に対応しているブラウザーでは、`display: block` や `display: inline` が指定されている場合など、外側の値のみを見つけると、内側の値を `flow` に設定します。
 これは期待通りに動作します。例えば、ある要素を block に指定した場合、その要素の子要素は block と inline の通常フローレイアウトに参加することが期待されます。


### 内側

`<display-inside>`

これらのキーワードは、要素の内側の表示種別を指定します。これは、要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。

`flow` 
Experimental

要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。

外側の表示種別が `inline` または `run-in` であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。

ほかのプロパティ (`position`, `float`, `overflow` など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たなブロック整形コンテキスト (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。

`flow-root`

要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。

`table`

HTML の `<table>` 要素と同じように動作します。これは、ブロックレベルボックスを定義します。

`flex`

要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。

`grid`

要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。

`ruby` 
Experimental

要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の `<ruby>` 要素のように動作します。


**メモ:** 2 値の構文に対応しているブラウザーは、 `display: flex` や `display: grid` などの内側の表示種別のみが指定されていると、外側の表示種別を `block` に設定します。これで期待通りに動作します。例えば、ある要素を `display: grid` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

### リスト項目

`<display-listitem>`

要素は内容のためにブロックボックスと、個別のリスト項目のインラインボックスを生成します。

`list-item` 単独の値を指定すると、要素はリスト項目のように動作します。これは `list-style-type` や `list-style-position` と共に使用することができます。

`list-item` は `<display-outside>` キーワードのいずれかと、 `<display-inside>` の `flow` または `flow-root` キーワードと組み合わせることもできます。

**メモ:** 2 値の構文に対応しているブラウザーでは、内側の表示種別がないと既定で `flow` になります。外側の表示種別が指定されないと、基本ボックスは外側の表示種別が `block` になります。

### 内部

`<display-internal>`

`table` や `ruby` のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。
 この節ではこれらを「内部」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。


`table-row-group`

これらの要素は HTML の `<tbody>` 要素のように動作します。

`table-header-group`

これらの要素は HTML の `<thead>` 要素のように動作します。

`table-footer-group`

これらの要素は HTML の `<tfoot>` 要素のように動作します。

`table-row`

これらの要素は HTML の `<tr>` 要素のように動作します。

`table-cell`

これらの要素は HTML の `<td>` 要素のように動作します。

`table-column-group`

これらの要素は HTML の `<colgroup>` 要素のように動作します。

`table-column`

これらの要素は HTML の `<col>` 要素のように動作します。

`table-caption`

これらの要素は HTML の `<caption>` 要素のように動作します。

`ruby-base` 
Experimental

これらの要素は HTML の `<rb>` 要素のように動作します。

`ruby-text` 
Experimental

これらの要素は HTML の `<rt>` 要素のように動作します。

`ruby-base-container` 
Experimental

これらの要素は無名のボックスとして生成された HTML の `<rbc>` 要素のように動作します。

`ruby-text-container` 
Experimental

これらの要素は HTML の `<rtc>` 要素のように動作します。


### ボックス

`<display-box>`

これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。

`contents`

これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 `contents` の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは Appendix B: Effects of display: contents on Unusual Elements を参照してください。

*ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの考慮の節をご覧ください。*

`none`

 要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。
 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに `visibility` プロパティを使用してください。



### 旧来のもの

`<display-legacy>`

CSS 2 では `display` プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。

`inline-block`

この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。

これは `inline flow-root` と等価です。

`inline-table`

`inline-table` は、 HTML には直接的に対応するものがありません。これは、 HTML の `<table>` 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内側はブロックレベルのコンテキストになります。

これは `inline table` と等価です。

`inline-flex`

要素は、インライン要素のようにふるまいつつ、その内容物をフレックスボックスモデルに従ってレイアウトします。

これは `inline flex` と等価です。

`inline-grid`

要素は、インライン要素のようにふるまいつつ、その内容物をグリッドモデルに従ってレイアウトします。

これは `inline grid` と等価です。


### 現在はどちらの構文を使用するべきか

Level 3 仕様書は `display` プロパティに 2 つの値を — 外側および内側の表示種別の指定を明示的に行うために — 説明しています。しかし、これはブラウザーの互換性が不十分です。

`<display-legacy>` による方法は、単一のキーワード値で同じ結果を生み出すので、二つのキーワード値による指定の対応が進むまで使用してください。例えば、 2 つの値でインラインのフレックスコンテナーは次のように指定することができます。


```css
.container {
  display: inline flex;
}
```


現在は、単一の値を使用して指定することができます。


```css
.container {
  display: inline-flex;
}
```


これらの仕様変更の詳細については、display の新しい 2 つの値の構文への対応の記事を参照してください。

### グローバル


```css
/\* グローバル値 \*/
display: inherit;
display: initial;
display: unset;
```

解説
--

`display` に設定できる様々な種類の値の個々のページでは、それらの値が動作する機能の複数の例をを設定しています。 — 構文の節を参照してください。なお、 display の様々な値については、以下の資料で詳しく解説していますので、ご覧ください。

* display の 2 値構文への対応
### CSS フローレイアウト (display: block, display: inline)

* 通常フローでのブロックおよびインラインレイアウト
* フローレイアウトとオーバーフロー
* フローレイアウトと書字方向
* 整形コンテキストの紹介
* フロー内とフローの外
### display: flex

* フレックスボックスの基本概念
* フレックスコンテナー内のアイテムの配置
* 主軸方向のフレックスアイテムの比率の制御
* フレックスアイテムの折り返しをマスターする
* フレックスアイテムの順序
* フレックスボックスと他のレイアウト方法の関係
* フレックスボックスの後方互換性
* フレックスボックスの典型的な用途
### display: grid

* グリッドレイアウトの基本概念
* グリッドレイアウトと他のレイアウト方法との関係
* 線に基づく配置を使用したグリッドレイアウト
* グリッドテンプレート領域
* 名前付きグリッド線を使用したレイアウト
* グリッドレイアウトでの自動配置
* グリッドレイアウトのボックス配置
* グリッド、論理的な値、書字方向
* グリッドレイアウトとアクセシビリティ
* CSS グリッドレイアウトとプログレッシブエンハンスメント
* グリッドを使用したよくあるレイアウトの実現
アクセシビリティの考慮
-----------

### display: none

要素の `display` の値に `none` を使用すると、その要素はアクセシビリティツリーから削除されます。すなわち、その要素とすべての子孫要素は読み上げ技術によって読み上げられなくなります。

要素を視覚的に隠したい場合は、よりアクセシブルな代替手段として、画面から視覚的に要素を削除しますが、スクリーンリーダーのような支援技術が解析可能な状態を維持するための、プロパティの組み合わせを使用できます。

### display: contents

大部分のブラウザーの現在の実装では、アクセシビリティツリーから `display` の値が `contents` であるすべての要素を削除します (ただし子孫は残ります)。これにより、その要素自身は読み上げソフトでは読み上げられなくなります。これは CSS 仕様書によれば正しくありません。

* More accessible markup with display: contents | Hidde de Vries
* Display: Contents Is Not a CSS Reset | Adrian Roselli
### 表

`<table>` 要素の `display` の値を `block`、`grid`、あるいは `flex` に変更すると、アクセシビリティツリーでの表現が変わります。これにより、表が読み上げ技術によって適切に読み上げられなくなります。

* Short note on what CSS display properties do to table semantics — The Paciello Group
* Hidden content for better a11y | Go Make Things
* MDN WCAG を理解する ― ガイドライン 1.3 の解説
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `inline` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り。ただし位置指定された要素とフロート、ルート要素を除く。これらは計算値が指定したものと違うキーワードになる可能性があります |
| アニメーションの種類 | Discrete behavior except when animating to or from `none` is visible for the entire duration |

形式文法
----
```

display =   
  [ <display-outside> || <display-inside> ]         |  
  <display-listitem>                                |  
  <display-internal>                                |  
  <display-box>                                     |  
  <display-legacy>                                  |  
  <display-outside> || [ <display-inside> | math ]    
  
<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    
  
<display-box> =   
  contents  |  
  none        
  
<display-legacy> =   
  inline-block  |  
  inline-table  |  
  inline-flex   |  
  inline-grid     
  
```

例
-

### display 値の比較

この例では、 2 つのブロックレベルのコンテナー要素があり、それぞれに 3 つのインラインの子要素があります。その下には、コンテナーに異なる `display` の値を適用するための選択メニューがあり、異なる値が要素のレイアウトとその子要素のレイアウトにどのように影響するかを比較対照することができます。

コンテナーとその子要素には `padding` と `background-color` が含まれているので、表示値の効果がわかりやすくなっています。

**メモ:** 新しい2つの値の構文は、対応がまだかなり限られているため、ここでは一切含めていません。

#### HTML


```html
<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<div>
  <label for="display">Choose a display value:</label>
  <select id="display">
    <option selected>block</option>
    <option>inline</option>
    <option>inline-block</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>table</option>
    <option>list-item</option>
  </select>
</div>
```


#### CSS


```css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}
```


#### JavaScript


```js
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener("change", updateDisplay);

updateDisplay();
```


#### 結果

**メモ:** 上記にリンクされている各個別の表示データ型のページには、より多くの例があります。

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通常フローでのブロックおよびインラインレイアウト
* 整形コンテキストの紹介
* `visibility`, `float`, `position`
* `grid`, `flex`