display

概要

display CSS プロパティは要素のレンダリングに使用されるボックスの種類を指定します。HTML では、display プロパティのデフォルト値は、HTML 仕様に記述されたふるまいか、ブラウザー/ユーザーのデフォルトのスタイルシートに記述されたふるまいから採られます。XML でのデフォルト値は inline です。

さまざまなディスプレイボックスタイプに加えて、値 none を使用すると、要素を非表示にできます。none は、すべての子孫要素も非表示にします。文書は、要素が文書木に存在しないかのようにレンダリングされます。

初期値inline
適用対象全要素
継承不可
メディアall
計算値指定通り。ただし位置指定された要素とフロート、ルート要素を除く。これらは計算値が指定したものと違うキーワードになる可能性があります
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* <display-outside> 値 */
display: block;
display: inline;
display: run-in;

/* <display-inside> 値 */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> 値と <display-inside> 値 */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> 値 */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> 値 */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> 値 */
display: contents;
display: none;

/* <display-legacy> 値 */
display: inline-block;
display: inline-list-item;
display: inline-table;
display: inline-flex;
display: inline-grid;

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

<display-outside>
これらのキーワードは、要素の outer display type を指定します。これは本質的には、フローレイアウトにおける要素の役割です。以下の値が定義されています:
説明
block 要素は、ブロック要素ボックスを生成します。
inline 要素は、1 つ以上のインライン要素ボックスを生成します。
run-in 要素は、ランインボックスを生成します。ランイン要素は、周囲の要素に応じてインラインボックスまたはブロックボックスのようにふるまいます。
  • ランインボックスがブロックボックスを含んでいる場合は、ブロックボックスと同じになります。
  • ブロックボックスが後続する場合は、ブロックボックスの最初のインラインボックスになります。
  • インラインボックスが後続する場合は、ブロックボックスになります。
<display-inside>
これらのキーワードは、要素の inner display type を指定します。これは、要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。以下の値が定義されています:
説明
flow 要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。

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

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

flow-root 要素は、新たな ブロック整形コンテキスト を確立するブロック要素ボックスを生成します。
table <table> HTML 要素と同じようにふるまいます。これは、ブロックレベルボックスを定義します。
flex 要素は、ブロック要素のようにふるまいつつ、そのコンテンツを flexbox モデルに従ってレイアウトします。
-webkit-flex flex の別名です。
-moz-box / -webkit-box 要素は、旧式の Flexbox 仕様に従う flexibe box としてふるまいます。
grid

要素は、ブロック要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従って、レイアウトします。

これは実験的機能で、ほとんどのブラウザーでサポートされていません。特に -moz-grid はこれのプレフィックス付きバージョンではなく、ウェブサイトで使ってはいけない XUL レイアウトモデル 用です。
subgrid 親要素で display:grid を指定しているとき、要素自体とその内容物をグリッドモデルに従ってレイアウトします。
ruby  要素は、インライン要素のようにふるまいつつ、そのコンテンツをルビ (ruby) モデルに従って、レイアウトします。HTML 要素の <ruby> のようにふるまいます。
<display-listitem>

要素は内容物のためのブロックボックスと、別にリストアイテムのインラインボックスを生成ます。

<display-inside> 値が指定されていない場合は、主ボックスの inner display type のデフォルト値が flow になります。<display-outside> 値が指定されていない場合は、主ボックスの outer display type のデフォルト値が block になります。

<display-internal>

table や ruby といったレイアウトモデルは、子孫が満たすことのできる役割が複数あり、内部構造が複雑です。このセクションではそれらの "internal" display 値を定義しており、この値は特定のレイアウトモード内でしか使用できません。

特に指定がない限り、これらの display 値を使用する要素の inner display type と outer display type の両方が、指定した値に設定されます。

説明
table-row-group 要素は <tbody> HTML 要素と同じようにふるまいます。
table-header-group 要素は <thead> HTML 要素と同じようにふるまいます。
table-footer-group 要素は <tfoot> HTML 要素と同じようにふるまいます。
table-row 要素は <tr> HTML 要素と同じようにふるまいます。
table-cell 要素は <td> HTML 要素と同じようにふるまいます。
table-column-group 要素は <colgroup> HTML 要素と同じようにふるまいます。
table-column 要素は <col> HTML 要素と同じようにふるまいます。
table-caption 要素は <caption> HTML 要素と同じようにふるまいます。
ruby-base 要素は、<rb> 要素のようにふるまいます。
ruby-text  要素は <rt> 要素のようにふるまいます。
ruby-base-container  要素は、無名ボックスとして生成される <rbc> 要素のようにふるまいます。
ruby-text-container  要素は <rtc> 要素のようにふるまいます。
<display-box>
これらの値は、要素がディスプレイボックスを生成するかを定義します。
説明
contents  この要素自身では特定のボックスを生成しません。疑似要素のボックスまたは子要素のボックスによって置換されます。
none

要素の表示を非表示にします (レイアウトに影響しないようになります)。すべての子孫要素も非表示になります。文書は、要素が存在しなかったかのようにレンダリングされます。

要素ボックスは通常どおりレイアウトを占めさせつつ、内容は見えなくさせたい場合は、visibility プロパティを参照してください。

<display-legacy>
CSS 2 では display プロパティでキーワードが 1 個の構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。以下の値が定義されています:
説明
inline-block

要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては 1 個のインラインボックスであるかのようにふるまい、一緒に流し込まれるようになります (このふるまいは置換要素と同じです)

これは inline flow-root と等価です。

inline-list-item この値は要素をリストアイテムに設定して、上記の値と同じ効果をもたらします。またこの要素では、list-style-positionoutside 値の計算値が inside になります。これ以外の場合は、display の値が inline と同様に扱われます。
inline-table

inline-table 値は、HTML には直接的に対応するものがありません。これは、<table> HTML 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。テーブルボックスの内部はブロックレベルのコンテキストになります。

これは inline table と等価です。

inline-flex

要素は、インライン要素のようにふるまいつつ、そのコンテンツを flexbox モデルに従ってレイアウトします。

これは inline flex と等価です。

-webkit-inline-flex inline-flex の別名です。
-moz-inline-box / -webkit-inline-box 要素は、旧式の Flexbox 仕様に従う inline flexibe box としてふるまいます。
inline-grid  要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従って、レイアウトします。

公式文法

none | inline | block | list-item | inline-list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents

要素を隠す

HTML コンテンツ

<p>Visible text</p>
<p class="secret">Invisible text</p>

CSS コンテンツ

p.secret {
  display: none;
}

表示結果

実際の表示を確認

仕様

仕様書 策定状況 コメント
CSS Lists and Counters Module Level 3
display の定義
草案 inline-list-item の値を追加
CSS Display Module Level 3
display の定義
草案 run-in および contents の値を追加
CSS Ruby Layout Module Level 1
display の定義
草案 rubyruby-baseruby-textruby-base-containerruby-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 の定義
勧告 初期定義。基本的な値として noneblockinlinelist-item

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline, block 1.0 (有) 1.0 (1.7 or earlier) 4.0 7.0 1.0 (85)
inline-block 1.0 (有) 3.0 (1.9) 5.5[4] 7.0 1.0 (85)
list-item 1.0 (有) 1.0 (1.7 or earlier) 6.0 7.0 1.0 (85)
inline-list-item 未サポート 未サポート 未サポート[6] 未サポート 未サポート 未サポート
run-in 1.0 [5] (有) 未サポート 8.0 7.0 1.0 (85)[5]
4.0 Removed in 32 5.0 (532.5) Removed in 8.0
inline-table 1.0 (有) 3.0 (1.9) 8.0 7.0 1.0 (85)
table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, table-caption 1.0 (有) 1.0 (1.7 or earlier) 8.0 7.0 1.0 (85)
flex 21.0-webkit (有) 18.0 (18.0)[1]
20.0 (20.0)
11 12.50 6.1-webkit
inline-flex 21.0-webkit (有) 18.0 (18.0)[1]
20.0 (20.0)
11 12.50 6.1-webkit
grid 57.0 (有)-ms 45.0 (45.0)[7] 10.0-ms 43.0 TP
inline-grid 57.0 (有)-ms 45.0 (45.0)[7] 10.0-ms 43.0 TP
subgrid ? 未サポート ? 未サポート ? ?
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container ? (有) 34.0 (34.0)[3] ? ? ?
contents 未サポート 未サポート 37 (37)[2] 未サポート 未サポート 未サポート
-webkit-box (有) ? 45.0 (45.0) 未サポート (有) ?
-webkit-inline-box (有) ? 48.0 (48.0) 未サポート (有) ?
-webkit-flex, -webkit-inline-flex (有) ? 48.0 (48.0) 未サポート (有) ?
flow-root ? ? 53.0 (53.0) ? ? ?
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 4.4 (有) ? ? ? 7.0-webkit

[1] フレックスボックスのサポートを有効化するには、Firefox 18 と 19 では、ユーザーが about:config 環境設定で "layout.css.flexbox.enabled" を true に変更する必要があります。複数ラインの flexbox は Firefox 28 からサポートしています。

[2] Firefox 36 で、設定項目による制御をデフォルトで無効化しました。

[3] CSS Ruby のサポートは設定項目 "layout.css.ruby.enabled" で制御しています。有効化するために、ユーザーが設定項目を true に変更しなければなりません。

[4] natural なインライン要素のみ

[5] インライン要素より前に置けない

[6] バグ 1105868 をご覧ください。

[7] CSS Grid のサポートは、Nightly/Alpha ビルドでは接頭辞なし、Beta/release ビルドでは設定項目 "layout.css.grid.enabled" で制御しています。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, Sebastianz, dskmori, mokeke, ethertank, sosleepy, Foomin10
 最終更新者: yyss,