CSS display 属性

定義と用法

display属性は、要素が生成するフレームのタイプを指定します。

説明

この属性はレイアウトを構築する際に要素が生成する表示フレームのタイプを定義します。HTMLなどのドキュメントタイプでは、displayを使用しないと危険です。なぜなら、HTMLで既に定義された表示階層を侵害する可能性があるからです。XMLの場合、XMLにはこのような階層が内蔵されていないため、すべてのdisplayは絶対に必要です。

注釈：CSS2には値compactとmarkerがありますが、広範なサポートが不足しているため、CSS2.1から削除されました。

参照してください：

CSSチュートリアル：CSS位置

HTML DOMリファレンスマニュアル：display属性

例

段落にインラインフレームを生成する：

p.inline
  {
  display:inline;
  }

実際に試してみてください

CSS文法

display: value;

属性値

値 説明
none この要素は表示されません。
block この要素はブロック要素として表示されます。この要素の前後には改行符が含まれます。
inline デフォルトです。この要素はインライン要素として表示され、要素の前後には改行符がありません。
inline-block インラインブロック要素。（CSS2.1で追加された値）
list-item この要素はリストとして表示されます。
run-in この要素は文脈に応じてブロック要素またはインライン要素として表示されます。
compact CSSに値compactがありますが、広範なサポートが不足しているため、CSS2.1から削除されました。
marker CSSにはmarkerという値がありますが、広範なサポートが不足しているため、CSS2.1から削除されました。
table この要素はブロックテーブルとして表示されます（<table>に似ていますが、テーブルの前後には改行符があります）。
inline-table この要素はインラインテーブルとして表示されます（<table>に似ていますが、テーブルの前後には改行符がありません）。
table-row-group この要素は1つまたは複数の行のグループとして表示されます（<tbody>に似ています）。
table-header-group この要素は1つまたは複数の行のグループとして表示されます（<thead>に似ています）。
table-footer-group この要素は1つまたは複数の行のグループとして表示されます（<tfoot>に似ています）。
table-row この要素はテーブルの行として表示されます（<tr>に似ています）。
table-column-group この要素は1つまたは複数の列のグループとして表示されます（<colgroup>に似ています）。
table-column この要素はセルの列として表示されます（<col>に似ています）
table-cell この要素はテーブルのセルとして表示されます（<td>および<th>に似ています）
table-caption この要素はテーブルのタイトルとして表示されます（<caption>に似ています）
inherit display属性の値は親要素から継承されるべきであると規定されています。

技術的詳細

デフォルト値： inline
継承性： no
バージョン： CSS1
JavaScript 言語： object.style.display="inline"

TIY 実例

要素をインライン要素として表示する方法
この例では、要素をインライン要素として表示する方法を示します。
要素をブロック要素として表示する方法
この例では、要素をブロック要素として表示する方法を示します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

注釈：！DOCTYPEが指定されている場合、Internet Explorer 8（およびそれ以降のバージョン）は属性値「inline-table」、「run-in」、「table」、「table-caption」、「table-cell」、「table-column」、「table-column-group」、「table-row」、「table-row-group」および「inherit」をサポートしています。