display

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

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

試してみましょう

display: block;

display: inline-block;

display: none;

display: flex;

display: grid;

<p>
  Apply different <code>display</code> values on the dashed orange-bordered
  <code>div</code>, which contains three child elements.
</p>
<section class="default-example" id="default-example">
  <div class="example-container">
    Some text A.
    <div id="example-element">
      <div class="child">Child 1</div>
      <div class="child">Child 2</div>
      <div class="child">Child 3</div>
    </div>
    Some text B.
  </div>
</section>

.example-container {
  width: 100%;
  height: 100%;
}

code {
  background: #8888;
}

#example-element {
  border: 3px dashed orange;
}

.child {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #ccccff;
  border: 1px solid #ababab;
  color: black;
}

構文

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;

/* 複数キーワードの構文 */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

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

/* グローバル値 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

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

値のグループ

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

外側

<display-outside>

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

block

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

inline

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

メモ: 複数キーワードの構文に対応しているブラウザーでは、外側の値のみがあるのを見つけると（display: block や display: inline が指定されている場合など）、内側の値を flow に設定します。（例えば、 display: block flow や display: inline flow のように。）

メモ: 古いブラウザーでも確実にレイアウトが機能するように、 1 つの値の構文を使用することができます。例えば、 display: inline flex には次のように代替を指定することができます。

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

詳しくは CSS display の複数キーワード構文の使用を参照してください。

内側

<display-inside>

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

flow

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

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

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

flow-root

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

table

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

flex

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

grid

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

ruby

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

メモ: 複数キーワードの構文に対応しているブラウザーは、内側の表示種別のみが指定されていると（display: flex や display: grid など）、外側の表示種別を block に設定します（display: block flex や display: block grid など）。

リストアイテム

<display-listitem>

要素はコンテンツのためにブロックボックスと、個別のリストアイテムのインラインボックスを生成します。

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

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

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

内部

<display-internal>

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

table-row-group

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

table-header-group

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

これらの要素は 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

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

ruby-text

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

ruby-base-container

これらの要素は無名のボックスとして生成されます。

ruby-text-container

これらの要素は 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 と等価です。

どちらの構文を使用するべきか

CSS 表示モジュールでは、 display プロパティに使用できる値を使って複数キーワードの構文を使用すると、明示的に外側と内側の表示方法を定義することができると説明しています。 単一キーワードの値（構成済みの <display-legacy> 値）は後方互換性のために対応しています。

例えば、 2 つの値を用いると、インラインのフレックスコンテナーを次のように指定することができます。

css
.container {
  display: inline flex;
}

古い単一の値を使用して指定することもできます。

css
.container {
  display: inline-flex;
}

これらの変更の詳細については、 CSS display の複数キーワード構文の使用の記事を参照してください。

グローバル

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

解説

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

複数キーワード値

CSS フローレイアウト (display: block, display: inline)

display: flex

display: grid

display のアニメーション

対応しているブラウザーでは、 display を離散アニメーション型でアニメーションします。これは一般的に、 2 つのプロパティ値の間をアニメーションの 50% で切り替わることを意味しています。

例外が一つあり、それは display: none との間でアニメーションする場合です。この場合、ブラウザーはアニメーションの間中、トランジションしたコンテンツが表示されるように、 2 つの値を切り替えます。

  • display を none から block （または他の表示可能な display 値）にアニメーションさせるときは、値が block に切り替わるのはアニメーションの 0% であり、期間中ずっと表示されます。
  • display を block （または他の表示可能な display 値）から none にアニメーションさせるときは、値は none に切り替わるのはアニメーションの 100% です。

この動作は、例えばコンテナーを display: none で DOM から除去したいが、すぐに消えてしまうのではなく、 opacity でフェードアウトさせたい場合に、出現・消滅アニメーションを作成するのに便利です。

CSS アニメーション で display をアニメーションさせる場合、開始する display の値を明示的なキーフレームで指定する必要があります（例えば 0% や from を使用します）。例えば、 CSS アニメーションの使用を参照してください。

display を CSS トランジションでアニメーションさせる場合、 2 つの追加の機能が必要になります。

  • @starting-style は、アニメーションする要素が最初に表示されたときからトランジションさせたいプロパティの開始値を提供します。これは予期しない動作を避けるために必要です。既定では、 CSS トランジションは要素の最初のスタイル更新時や、 display の型が none から他の型へ変更された時には発生しません。
  • transition-behavior: allow-discrete は、 transition-property 宣言（または一括指定の transition）で display のトランジションを有効にするために設定する必要があります。

display プロパティのトランジションの例は、 @starting-style と transition-behavior のページを参照してください。

アクセシビリティ

display: none

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

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

display: none はアクセシビリティツリーからコンテンツを隠しますが、隠されている要素でも、可視要素の aria-describedby または aria-labelledby 属性から参照されている場合は、支援技術に公開されます。

display: contents

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

表

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

公式定義

初期値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 が含まれているので、表示値の効果がわかりやすくなっています。

HTML

html
<article class="container">
  <span>1 つ目</span>
  <span>2 つ目</span>
  <span>3 つ目</span>
</article>

<article class="container">
  <span>1 つ目</span>
  <span>2 つ目</span>
  <span>3 つ目</span>
</article>

<div>
  <label for="display">display の値を選択:</label>
  <select id="display">
    <option selected>block</option>
    <option>block flow</option>
    <option>inline</option>
    <option>inline flow</option>
    <option>flow</option>
    <option>flow-root</option>
    <option>block flow-root</option>
    <option>table</option>
    <option>block table</option>
    <option>flex</option>
    <option>block flex</option>
    <option>grid</option>
    <option>block grid</option>
    <option>list-item</option>
    <option>block flow list-item</option>
    <option>inline flow list-item</option>
    <option>block flow-root list-item</option>
    <option>inline flow-root list-item</option>
    <option>contents</option>
    <option>none</option>
    <option>inline-block</option>
    <option>inline flow-root</option>
    <option>inline-table</option>
    <option>inline table</option>
    <option>inline-flex</option>
    <option>inline flex</option>
    <option>inline-grid</option>
    <option>inline grid</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();

結果

なお、説明のために、以下に相当する複数キーワードの値が追加されています。

  • block = block flow
  • inline = inline flow
  • flow = block flow
  • flow-root = block flow-root
  • table = block table
  • flex = block flex
  • grid = block grid
  • list-item = block flow list-item
  • inline-block = inline flow-root
  • inline-table = inline table
  • inline-flex = inline flex
  • inline-grid = inline grid

値のグループ以下にあるそれぞれの独立した表示型のページに、より多くの例があります。

仕様書

Specification
CSS Display Module Level 3
# the-display-properties
Scalable Vector Graphics (SVG) 2
# VisibilityControl

ブラウザーの互換性

関連情報