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.
display
は CSS のプロパティで、要素をブロックボックスとインラインボックスのどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。
正式には、 display
プロパティは要素の内側と外側の表示種別を設定します。外側の型は要素のフローレイアウトへの参加方法を設定し、内側の型は子要素のレイアウトを設定します。 display
のいくつかの値は、それ自身の個別の仕様書で完全に定義されています。例えば、 display: flex
が宣言されたときに何が起こるかの詳細は、 CSS Flexible Box Model 仕様書で定義されています。
試してみましょう
構文
/* 構成済みの値 */
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>
-
これらのキーワードは、本質的に要素のフローレイアウトにおける役割を表す、要素の外側の表示種別を指定します。
メモ: 複数キーワードの構文に対応しているブラウザーでは、外側の値のみがあるのを見つけると(display: block
や display: inline
が指定されている場合など)、内側の値を flow
に設定します。(例えば、 display: block flow
や display: inline flow
のように。)
メモ: 古いブラウザーでも確実にレイアウトが機能するように、 1 つの値の構文を使用することができます。例えば、 display: inline flex
には次のように代替を指定することができます。
.container {
display: inline-flex;
display: inline flex;
}
詳しくは CSS display の複数キーワード構文の使用を参照してください。
内側
<display-inside>
-
これらのキーワードは、要素の内側の表示種別を指定します。これは、要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。
flow
Experimental-
要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。
外側の表示種別が
inline
またはrun-in
であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。ほかのプロパティ (
position
,float
,overflow
など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たなブロック整形コンテキスト (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。 flow-root
-
要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
table
-
HTML の
<table>
要素と同じように動作します。これは、ブロックレベルボックスを定義します。 flex
-
要素は、ブロックレベル要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
grid
-
要素は、ブロックレベル要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
ruby
Experimental-
要素は、インラインレベル要素のように動作しつつ、そのコンテンツをルビ (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>
要素のように動作します。 -
これらの要素は HTML の
<caption>
要素のように動作します。 ruby-base
Experimental-
これらの要素は HTML の
<rb>
要素のように動作します。 ruby-text
Experimental-
これらの要素は HTML の
<rt>
要素のように動作します。 ruby-base-container
Experimental-
これらの要素は無名のボックスとして生成されます。
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
と等価です。
どちらの構文を使用するべきか
CSS 表示モジュールでは、 display
プロパティに使用できる値を使って複数キーワードの構文を使用すると、明示的に外側と内側の表示方法を定義することができると説明しています。
単一キーワードの値(構成済みの <display-legacy>
値)は後方互換性のために対応しています。
例えば、 2 つの値を用いると、インラインのフレックスコンテナーを次のように指定することができます。
.container {
display: inline flex;
}
古い単一の値を使用して指定することもできます。
.container {
display: inline-flex;
}
これらの変更の詳細については、 CSS display の複数キーワード構文の使用の記事を参照してください。
グローバル
/* グローバル値 */
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: 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
<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>inline</option>
<option>inline-block</option>
<option>inline flow-root</option>
<option>none</option>
<option>flex</option>
<option>inline-flex</option>
<option>inline flex</option>
<option>grid</option>
<option>inline-grid</option>
<option>inline grid</option>
<option>table</option>
<option>block 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();
結果
なお、説明のために、以下に相当する複数キーワードの値が追加されています。
inline-block
=inline flow-root
inline-flex
=inline flex
inline-grid
=inline grid
table
=block table
値のグループ以下にあるそれぞれの独立した表示データ型のページに、より多くの例があります。
仕様書
Specification |
---|
CSS Display Module Level 3 # the-display-properties |
ブラウザーの互換性
BCD tables only load in the browser