display

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

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

構文

display プロパティは、キーワード値を使用して指定します。キーワード値は以下の 6 つのカテゴリに分類されます。

.container {
  display:  [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
}

外側

<display-outside>
これらのキーワードは、本質的に要素のフローレイアウトの役割を表す、要素の外部表示種別を指定します。

有効な <display-outside> の値は以下の通りです。

block
要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。
inline
要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。
run-in これは実験段階の API です。製品内のコードで使用しないようご注意ください。
要素は、ランインボックスを生成します。 display: run-in が定義された要素の隣接する兄弟がブロックボックスの場合、ランインボックスはその次のブロックスボックスの最初のインラインボックスになります。

ランイン要素は、周囲の要素に応じてインラインボックスまたはブロックボックスのように動作します。ランインボックスがブロックボックスを含んでいる場合は、ブロックボックスと同じになります。ブロックボックスが後続する場合は、ランインボックスはブロックボックスの最初のインラインボックスになります。インラインボックスが後続する場合は、ブロックボックスになります。

: 二つの値の構文に対応しているブラウザーは、 display: blockdisplay: inline などの外部表示種別のみが指定されていると、内部表示種別を flow に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。

内側

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

有効な <display-inside> の値は以下の通りです。

flow これは実験段階の API です。製品内のコードで使用しないようご注意ください。
要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。

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

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

flow-root
要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
table
HTML の <table> 要素と同じように動作します。これは、ブロックレベルボックスを定義します。
flex
要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
grid
要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
ruby これは実験段階の API です。製品内のコードで使用しないようご注意ください。
要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の <ruby> 要素のように動作します。

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

リストアイテム

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

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

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

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

内部

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

有効な <display-internal> の値は次の通りです。

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 これは実験段階の API です。製品内のコードで使用しないようご注意ください。
これらの要素は HTML の <rb> 要素のように動作します。
ruby-text これは実験段階の API です。製品内のコードで使用しないようご注意ください。
これらの要素は HTML の <rt> 要素のように動作します。
ruby-base-container これは実験段階の API です。製品内のコードで使用しないようご注意ください。
これらの要素は無名のボックスとして生成された HTML の <rbc> 要素のように動作します。
ruby-text-container これは実験段階の API です。製品内のコードで使用しないようご注意ください。
これらの要素は HTML の <rtc> 要素のように動作します。

ボックス

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

有効な <display-box> の値は以下のとおりです。

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

ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの考慮の節をご覧ください。
none
要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。
要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに visibility プロパティを使用してください。

従来のもの

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

有効な <display-legacy> は以下のとおりです。

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 プロパティに二つの値を — 外部および内部の表示型の指定を明示的に行うために — 説明しています。しかし、これはブラウザーの互換性が不十分です。

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

.container {
  display: inline flex;
}

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

.container {
  display: inline-flex;
}

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

グローバル

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

解説

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

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

display: flex

display: grid

アクセシビリティの考慮

display: none

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

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

display: contents

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

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

公式定義

初期値inline
適用対象すべての要素
継承なし
計算値指定通り。ただし位置指定された要素とフロート、ルート要素を除く。これらは計算値が指定したものと違うキーワードになる可能性があります
アニメーションの種類離散値

形式文法

[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

ここで
<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-list-item | inline-table | inline-flex | inline-grid

display 値の比較

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

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

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

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

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

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();

Result

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

仕様書

仕様書 状態 備考
CSS Display Module Level 3
display の定義
勧告候補 run-in, flow, flow-root, contents, 複数のキーワード値を追加。
CSS Ruby Layout Module Level 1
display の定義
草案 ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container の値を追加
CSS Grid Layout
display の定義
勧告候補 grid box モデルの値を追加
CSS Flexible Box Layout Module
display の定義
勧告候補 flexible box モデルの値を追加
CSS Level 2 (Revision 1)
display の定義
勧告 テーブルモデルの値と inline-block の値を追加
CSS Level 1
display の定義
勧告 初回定義。基本的な値として none, block, inline, list-item

ブラウザーの互換性

BCD tables only load in the browser

関連情報