Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

概要

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

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

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

構文

display: none;

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

display: inherit
display: initial
display: unset

display-value

要素に適用するレンダリングタイプを定義するキーワードです。取り得る値とその意味は以下のとおりです。
値集合 説明
Basic values (CSS 1) none

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

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

inline 要素は、1つ以上のインライン要素ボックスを生成します。
block 要素は、ブロック要素ボックスを生成します。
list-item 要素は、コンテンツのためのブロックボックスを1つと、それとは別のリストマーカ用のインラインボックスを1つ生成します。
Extended values (CSS 2.1) inline-block 要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては一個のインラインボックスであるかのようにふるまい、一緒に流し込まれるようになります(このふるまいは置換要素とほぼ同じです)
Table model values (CSS 2.1) inline-table inline-table 値は、HTMLには直接的に対応するものがありません。これは、  <table> 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。テーブルボックスの内部はブロックレベルのコンテキストになります。
table <table> 要素と同じようにふるまいます。これは、ブロックレベルボックスを定義します。
table-caption  <caption> 要素と同じようにふるまいます。
table-cell  <td> 要素と同じようにふるまいます。
table-column

 <col> 要素と同じようにふるまいます。

table-column-group  <colgroup> 要素と同じようにふるまいます。
table-footer-group  <tfoot> 要素と同じようにふるまいます。
table-header-group  <thead> 要素と同じようにふるまいます。
table-row <tr> 要素と同じようにふるまいます。
table-row-group  <tbody> 要素と同じようにふるまいます。
Flexbox model values (CSS3) flex 要素は、ブロック要素のようにふるまいつつ、そのコンテンツを flexbox モデルに従ってレイアウトします。
inline-flex 要素は、インライン要素のようにふるまいつつ、そのコンテンツを flexbox モデルに従ってレイアウトします。
Grid box model values (CSS3) grid

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

これは実験的機能で、ほとんどのブラウザでサポートされていません。特に -moz-grid はこれのプレフィックス付きバージョンではなく、ウェブサイトで使ってはいけない XUL レイアウトモデル 用です。
inline-grid 要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従って、レイアウトします。
Ruby formatting model values (CSS3) ruby 要素は、インライン要素のようにふるまいつつ、そのコンテンツをルビ (ruby) モデルに従って、レイアウトします。HTML 要素の <ruby> のようにふるまいます。
ruby-base 要素は、<rb> 要素のようにふるまいます。
ruby-text 要素は、<rt> 要素のようにふるまいます。
ruby-base-container 要素は、<rbc> 要素のようにふるまいます。
ruby-text-container 要素は、<rtc> 要素のようにふるまいます。
Experimental values run-in
  • ブロックボックスを含んでいる場合は、ブロックボックスと同じになります。
  • ブロックボックスが後続する場合は、ブロックボックスの最初のインラインボックスになります。
  • インラインボックスが後続する場合は、ブロックボックスになります。
contents この要素自身では特定のボックスを生成しません。疑似要素のボックスまたは子要素のボックスによって配置されます。

公式文法

none | inline | block | 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

実際の表示を確認

p.secret  { display: none }
<p style="display:none"> invisible text </p>

仕様

仕様書 策定状況 コメント
CSS Basic Box Model
The definition of 'display' in that specification.
草案 run-in の値を追加
CSS Ruby Layout Module Level 1
The definition of 'display' in that specification.
草案 rubyruby-baseruby-textruby-base-containerruby-text-container の値を追加
CSS Grid Layout
The definition of 'display' in that specification.
草案 grid box の値を追加
CSS Flexible Box Layout Module
The definition of 'display' in that specification.
Last Call Working Draft flexible box モデルの値を追加
CSS Level 2 (Revision 1)
The definition of 'display' in that specification.
勧告 テーブルモデルの値とinline-block の値を追加
CSS Level 1
The definition of 'display' in that specification.
勧告 基本的な値として none, block, inline, list-item

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline and block 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
inline-block 1.0 3.0 (1.9) 5.5 (-7.0)
natural なインライン要素のみ
7.0 1.0 (85)
list-item 1.0 1.0 (1.0) 6.0 7.0 1.0 (85)
run-in 1.0
インライン要素より前に置けない
未サポート 8.0 7.0 1.0 (85)
インライン要素の前に置けない

4.0

32 で削除

5.0 (532.5)
inline-table 1.0 3.0 (1.9) 8.0 7.0 1.0 (85)
table, table-cell, table-column, table-colgroup, 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)(behind a pref) [1]
20.0 (20.0)
未サポート 12.50 未サポート
inline-flex 21.0-webkit 18.0 (18.0)(behind a pref) [1]
20.0 (20.0)
未サポート 12.50 未サポート
grid ? 未サポート 10.0-ms ? ?
inline-grid ? 未サポート 10.0-ms ? ?
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container ? 34.0 (34.0) (behind a pref) [3] ? ? ?
contents 未サポート 37 (37) [2] 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

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

関連情報

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

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