display

概要

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

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

  • 初期値 inline
  • 適用対象 全要素
  • 継承 継承しない
  • メディア all
  • 計算値 as the specified value, except for positioned and floating elements and for the root element. In both case the computed value may be another keyword than the one specified.
  • アニメーションの可否 不可
  • 正規順序 形式文法で定義される一意のあいまいでない順序

構文

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

実際の表示を確認

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.
勧告候補 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 に変更する必要があります。

関連情報

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

Contributors to this page: dskmori, mokeke, ethertank, sosleepy, Foomin10
最終更新者: dskmori,