CSSリファレンスマニュアル

CSS @ルール(RULES)

CSS属性全書

CSS display 属性の使用方法と例

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

以下のテーブルには、この属性の使用方法とバージョン履歴、JavaScriptスクリプトでの使用方法が記載されています。

デフォルト値：	inline
適用範囲：	すべての要素
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS 1、2、3
JavaScriptの構文：	object.style.display="block"

使用方法

display属性の計算値は、ルート要素およびフロートまたは絶対位置の要素の指定値が異なります。
display属性の値がnoneに設定されている場合、この要素は何もフレームを生成せず、レイアウトに影響を与えません。要素とその内容は完全にフォーマット構造から削除され、このドキュメントを表示する際には、この要素がドキュメントツリーに存在しないかのように処理されます。

表示される構文

この属性の構文は以下の通りです：

display:　inline　|　block　|　contents　|　flex　|　flow　|　flow-root　|　grid　|　inline-block　|　inline-flex　|　inline-grid　|　inline-table　|　list-item　|　run-in　|　table　|　table-caption　|　table-column-group　|　table-header-group　|　table-footer-group　|　table-row-group　|　table-cell　|　table-column　|　table-row　|　none　|　initial　|　inherit

以下の例では、display属性の使用方法を示しています。

例

　　div　{
　　　display:　inline;
　　}
　　span　{
　　　display:　block;
　　}

テストしてみる‹/›

属性値

この属性の値を説明するテーブルが以下に示されています。

値	説明
inline	要素はインラインレベルのフレーム。
block	要素はブロックレベルフレーム。
contents	要素自体はフレームを生成しませんが、その子要素およびポーズ要素生成フレームを生成し、テキストは通常通りに動作します。
flex	要素はブロックレベルのフレックスコンテナボックス。
flow	要素はフローレイアウト（ブロックおよびインラインレイアウト）を使用して内容をレイアウトします。
flow-root	要素はブロックコンテナフレームを生成し、内容に対してフローレイアウトを使用してレイアウトを行います。
grid	要素はブロックレベルのグリッドコンテナフレームを生成します。
inline-block	要素はブロックフレームを生成し、そのレイアウトはインラインフレームのように見えます。
inline-flex	要素はインラインレベルのフレックスコンテナフレームを生成します。
inline-grid	要素はインラインレベルのグリッドコンテナフレームを生成します。
inline-table	この要素の動作はテーブルのように、インラインフレームのように見えます。
list-item	要素は内容にブロックフレームを生成し、リストタグに独立したインラインフレームを生成します。
run-in	この要素は文脈に応じてブロックまたはインラインフレームを生成します。
table	この要素の動作は<table>HTML要素。
table-caption	この要素の動作は<caption>HTML要素。
table-column-group	この要素の動作は<colgroup>HTML要素。
table-header-group	この要素の動作は<thead>HTML要素。
table-footer-group	この要素の動作は<tfoot>HTML要素。
table-row-group	この要素の動作は<tbody>HTML要素。
table-cell	この要素の動作は<td>HTML要素。
table-column	この要素の動作は<col>HTML要素。
table-row	この要素の動作は<tr>HTML要素。
none	要素の表示を閉じます。すべての子要素の表示属性が none に設定されていても、表示を閉じます。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のdisplay属性の値を使用します。

ブラウザの互換性

display属性のブラウザの互換性について、以下のテーブルの数字は、その属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザがこの属性をサポートしています。

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 7+

警告：値、例えば contents、flow-root、run-inなどの多くのブラウザではサポートが不十分です。一時的に使用を避けるのが最善です。

さらに詳しく

以下のチュートリアルを参照してください：CSS Display。

関連属性：visibility、float、position。

CSS empty-cells 属性 CSS direction 属性