--- title: display slug: Web/CSS/display tags: - CSS - CSS Display - CSS Property - Reference - display - 'recipe:css-property' translation_of: Web/CSS/display ---

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

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

構文

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

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

外側

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

内側

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

リストアイテム

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

内部

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

ボックス

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

従来のもの

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

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

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

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

.container {
  display: inline flex;
}

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

.container {
  display: inline-flex;
}

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

グローバル

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

解説

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

display の新しい2つの値の構文への対応

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

display: flex

display: grid

アクセシビリティの考慮

display: none

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

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

display: contents

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

表

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

公式定義

形式文法

{{csssyntax}}

例

display 値の比較

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

コンテナとその子要素には {{cssxref("padding")}} と {{cssxref("background-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

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

仕様書

仕様書	状態	備考
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}	{{Spec2('CSS3 Display')}}	`run-in`, `flow`, `flow-root`, `contents`, 複数のキーワード値を追加。
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}	{{Spec2('CSS3 Ruby')}}	`ruby`, `ruby-base`, `ruby-text`, `ruby-base-container`, `ruby-text-container` の値を追加
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}	{{Spec2('CSS3 Grid')}}	grid box モデルの値を追加
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}	{{Spec2('CSS3 Flexbox')}}	flexible box モデルの値を追加
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}	{{Spec2('CSS2.1')}}	テーブルモデルの値と `inline-block` の値を追加
{{SpecName('CSS1', '#display', 'display')}}	{{Spec2('CSS1')}}	初回定義。基本的な値として `none`, `block`, `inline`, `list-item`

構文

外側

内側