display

概要

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

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

構文

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>

仕様

ブラウザ実装状況

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

関連情報

• visibility, float, position
• flex