display
display
は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。
正式には、 display
プロパティは要素の内側と外側の表示種別を設定します。外側の型は要素のフローレイアウトへの参加方法を設定し、内側の型は子要素のレイアウトを設定します。 display
のいくつかの値は、それ自身の個別の仕様書で完全に定義されています。例えば、 display: flex
が宣言されたときに何が起こるかの詳細は、 CSS Flexible Box Model 仕様書で定義されています。個々の仕様書については、この文書の最後にある表を参照してください。
構文
display
プロパティは、キーワード値を使用して指定します。
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;
/* 2 値の構文 */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;
/* その他の値 */
display: table;
display: table-row; /* すべての表の要素が同等の CSS display 値を持っています */
display: list-item;
/* グローバル値 */
display: inherit;
display: initial;
display: revert;
display: unset;
値のグループ
キーワード値は 6 つの値のカテゴリーにグループ分けすることができます。
外側
<display-outside>
-
これらのキーワードは、本質的に要素のフローレイアウトにおける役割を表す、要素の外側の表示種別を指定します。
メモ: 2 値構文に対応しているブラウザーでは、display: block
や display: inline
が指定されている場合など、外側の値のみを見つけると、内側の値を flow
に設定します。
これは期待通りに動作します。例えば、ある要素を block に指定した場合、その要素の子要素は block と inline の通常フローレイアウトに参加することが期待されます。
内側
<display-inside>
-
これらのキーワードは、要素の内側の表示種別を指定します。これは、要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。
flow
Experimental-
要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。
外側の表示種別が
inline
またはrun-in
であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。ほかのプロパティ (
position
,float
,overflow
など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たなブロック整形コンテキスト (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。 flow-root
-
要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
table
-
HTML の
<table>
要素と同じように動作します。これは、ブロックレベルボックスを定義します。 flex
-
要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
grid
-
要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
ruby
Experimental-
要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の
<ruby>
要素のように動作します。
メモ: 2 値の構文に対応しているブラウザーは、 display: flex
や display: grid
などの内側の表示種別のみが指定されていると、外側の表示種別を block
に設定します。これで期待通りに動作します。例えば、ある要素を display: grid
に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。
リスト項目
<display-listitem>
-
要素は内容のためにブロックボックスと、個別のリスト項目のインラインボックスを生成します。
list-item
単独の値を指定すると、要素はリスト項目のように動作します。これは list-style-type
や list-style-position
と共に使用することができます。
list-item
は <display-outside>
キーワードのいずれかと、 <display-inside>
の flow
または flow-root
キーワードと組み合わせることもできます。
メモ: 2 値の構文に対応しているブラウザーでは、内側の表示種別がないと既定で 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
Experimental-
これらの要素は HTML の
<rb>
要素のように動作します。 ruby-text
Experimental-
これらの要素は HTML の
<rt>
要素のように動作します。 ruby-base-container
Experimental-
これらの要素は無名のボックスとして生成された HTML の
<rbc>
要素のように動作します。 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
と等価です。
現在はどちらの構文を使用するべきか
Level 3 仕様書は display
プロパティに 2 つの値を — 外側および内側の表示種別の指定を明示的に行うために — 説明しています。しかし、これはブラウザーの互換性が不十分です。
<display-legacy>
による方法は、単一のキーワード値で同じ結果を生み出すので、二つのキーワード値による指定の対応が進むまで使用してください。例えば、 2 つの値でインラインのフレックスコンテナーは次のように指定することができます。
css
.container {
display: inline flex;
}
現在は、単一の値を使用して指定することができます。
css
.container {
display: inline-flex;
}
これらの仕様変更の詳細については、display の新しい 2 つの値の構文への対応の記事を参照してください。
グローバル
css
/* グローバル値 */
display: inherit;
display: initial;
display: unset;
解説
display
に設定できる様々な種類の値の個々のページでは、それらの値が動作する機能の複数の例をを設定しています。 — 構文の節を参照してください。なお、 display の様々な値については、以下の資料で詳しく解説していますので、ご覧ください。
CSS フローレイアウト (display: block, display: inline)
display: flex
display: grid
アクセシビリティの考慮
display: none
要素の display
の値に none
を使用すると、その要素はアクセシビリティツリーから削除されます。すなわち、その要素とすべての子孫要素は読み上げ技術によって読み上げられなくなります。
要素を視覚的に隠したい場合は、よりアクセシブルな代替手段として、画面から視覚的に要素を削除しますが、スクリーンリーダーのような支援技術が解析可能な状態を維持するための、プロパティの組み合わせを使用できます。
display: contents
大部分のブラウザーの現在の実装では、アクセシビリティツリーから display
の値が contents
であるすべての要素を削除します (ただし子孫は残ります)。これにより、その要素自身は読み上げソフトでは読み上げられなくなります。これは CSS 仕様書によれば正しくありません。
表
<table>
要素の display
の値を block
、grid
、あるいは flex
に変更すると、アクセシビリティツリーでの表現が変わります。これにより、表が読み上げ技術によって適切に読み上げられなくなります。
公式定義
形式文法
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
が含まれているので、表示値の効果がわかりやすくなっています。
メモ: 新しい2つの値の構文は、対応がまだかなり限られているため、ここでは一切含めていません。
HTML
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
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();
結果
メモ: 上記にリンクされている各個別の表示データ型のページには、より多くの例があります。
仕様書
Specification |
---|
CSS Display Module Level 3 # the-display-properties |
ブラウザーの互換性
BCD tables only load in the browser