path: root/files/ja/web/css/display/index.html

---
title: display
slug: Web/CSS/display
tags:
  - CSS
  - CSS Display
  - CSS Property
  - Reference
  - display
  - 'recipe:css-property'
translation_of: Web/CSS/display
---
<div>{{CSSRef}}</div>

<p class="summary"><strong><code>display</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素を<a href="/ja/docs/Web/CSS/CSS_Flow_Layout" rel="nofollow">ブロック要素とインライン要素</a>のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば <a href="/ja/docs/Web/CSS/CSS_Flow_Layout">フローレイアウト</a>、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout" rel="nofollow">グリッド</a>、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout" rel="nofollow">フレックス</a>などを設定します。</p>

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

<h2 id="Syntax" name="Syntax">構文</h2>

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

<pre class="brush: css notranslate">.container {
  display:  [ &lt;display-outside&gt; || &lt;display-inside&gt; ] | &lt;display-listitem&gt; | &lt;display-internal&gt; | &lt;display-box&gt; | &lt;display-legacy&gt; ;
}
</pre>

<h3 id="Outside" name="Outside">外側</h3>

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

<p>{{page("/ja/docs/Web/CSS/display-outside", "Syntax")}}</p>

<h3 id="Inside" name="Inside">内側</h3>

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

<p>{{page("/ja/docs/Web/CSS/display-inside", "Syntax")}}</p>

<h3 id="List_Item" name="List_Item">リストアイテム</h3>

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

<p>{{page("/ja/docs/Web/CSS/display-listitem", "Syntax")}}</p>

<h3 id="Internal" name="Internal">内部</h3>

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

<p>{{page("/ja/docs/Web/CSS/display-internal", "Syntax")}}</p>

<h3 id="Box" name="Box">ボックス</h3>

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

<p>{{page("/ja/docs/Web/CSS/display-box", "Syntax")}}</p>

<h3 id="Legacy" name="Legacy">従来のもの</h3>

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

<p>{{page("/ja/docs/Web/CSS/display-legacy", "Syntax")}}</p>

<h3 id="Which_syntax_should_you_use_now" name="Which_syntax_should_you_use_now">現在はどちらの構文を使用するべきか</h3>

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

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

<pre class="brush: css notranslate">.container {
  display: inline flex;
}</pre>

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

<pre class="brush: css notranslate">.container {
  display: inline-flex;
}</pre>

<p>これらの仕様変更の詳細については、<a href="/ja/docs/Web/CSS/display/two-value_syntax_of_display">display の新しい2つの値の構文への対応</a>の記事を参照してください。</p>

<h3 id="Global" name="Global">グローバル</h3>

<pre class="brush:css notranslate">/* グローバル値 */
display: inherit;
display: initial;
display: unset;
</pre>

<h2 id="Description" name="Description">解説</h2>

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

<ul>
 <li><a href="/ja/docs/Web/CSS/display/two-value_syntax_of_display">display の新しい2つの値の構文への対応</a></li>
</ul>

<h3 id="CSS_フローレイアウト_display_block_display_inline">CSS フローレイアウト (display: block, display: inline)</h3>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローのブロックおよびインラインレイアウト</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">フローレイアウトとはみ出し</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">フローレイアウトと書字方向</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">整形コンテキストの解説</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">フロー内とフロー外</a></li>
</ul>

<h3 id="display_flex">display: flex</h3>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の制御</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">クロスブラウザーの Flexbox ミックスイン</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">フレックスアイテムの並べ替え</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">フレックスボックスと他のレイアウト方法との関係</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">フレックスボックスの後方互換性</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">フレックスボックスの典型的な使用例</a></li>
</ul>

<h3 id="display_grid">display: grid</h3>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">グリッドレイアウトと他のレイアウト方法との関係</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">行ベースの配置</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">グリッドレイアウトでの自動配置</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドレイアウトとプログレッシブエンハンスメント</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使用した良くあるレイアウトの実現</a></li>
</ul>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<h3 id="display_none">display: none</h3>

<p>要素の <code>display</code> の値に <code>none</code> を使用すると、その要素は<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>から削除されます。すなわち、その要素とすべての子孫要素は読み上げ技術によって読み上げられなくなります。</p>

<p>要素を視覚的に隠したい場合は、よりアクセシブルな代替手段として、画面から視覚的に要素を削除しますが、読み上げソフトのような支援技術が解析可能な状態を維持するための、<a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">プロパティの組み合わせ</a>を使用できます。</p>

<h3 id="display_contents">display: contents</h3>

<p>大部分のブラウザーの現在の実装では、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>から <code>display</code> の値が <code>contents</code> であるすべての要素を削除します (ただし子孫は残ります)。これにより、その要素自身は読み上げソフトでは読み上げられなくなります。これは <a href="https://drafts.csswg.org/css-display/#valdef-display-contents">CSS 仕様書</a>によれば正しくありません。</p>

<ul>
 <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents | Hidde de Vries</a></li>
 <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
</ul>

<h3 id="Tables" name="Tables">表</h3>

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

<ul>
 <li><a class="external" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li>
 <li><a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN WCAG を理解する ― ガイドライン 1.3 の解説</a></li>
 <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="display_value_comparison" name="display_value_comparison">display 値の比較</h3>

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

<p>コンテナとその子要素には {{cssxref("padding")}} と {{cssxref("background-color")}} が含まれているので、表示値の効果がわかりやすくなっています。</p>

<div class="blockIndicator note">
<p><strong>注</strong>: 新しい2つの値の構文は、対応がまだかなり限られているため、ここでは一切含めていません。</p>
</div>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;article class="container"&gt;
  &lt;span&gt;First&lt;/span&gt;
  &lt;span&gt;Second&lt;/span&gt;
  &lt;span&gt;Third&lt;/span&gt;
&lt;/article&gt;

&lt;article class="container"&gt;
  &lt;span&gt;First&lt;/span&gt;
  &lt;span&gt;Second&lt;/span&gt;
  &lt;span&gt;Third&lt;/span&gt;
&lt;/article&gt;

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

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">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;
}</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js notranslate">const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

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

select.addEventListener('change', updateDisplay);

updateDisplay();</pre>

<h4 id="Result">Result</h4>

<p>{{EmbedLiveSample('display_value_comparison','100%', 440)}}</p>

<div class="blockIndicator note">
<p><strong>注</strong>: 上記にリンクされている各個別の表示データ型のページには、より多くの例があります。</p>
</div>

<h2 id="Specifications" name="Specifications">仕様書</h2>

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

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("css.properties.display", 10)}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローのブロックおよびインラインレイアウト</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting contexts explained</a></li>
 <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li>
 <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li>
</ul>