CSS display プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

例

インライン要素として <p> 要素を表示します：

p.inline {
    display: inline;
}
Try it Yourself ❯

他の "Try it Yourself" 例が下にあります。

定義と用法

display プロパティは、HTML要素へ使用するボックスのタイプを指定します。

デフォルト値： inline
継承： 継承する
アニメーション可否： 不可。animatable を参照
バージョン： CSS1
JavaScript 構文： object.style.display="none" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

プロパティ
display 4.0 8.0
Partial from 5.5		 3.0 3.1 7.0

注: IE7 以前では、値 "inline-table"、"table"、"table-caption"、 "table-cell"、"table-column"、"table-column-group"、 "table-row"、"table-row-group"をサポートしていません。 IE8 には !DOCTYPE が必要です。IE9 は、この値をサポートしています。

注: Safari で動作させるには、値 "flex"と "inline-flex" には接頭辞が必要です。 "flex" には "display: -webkit-flex" を、"inline-flex" には "display: -webkit-inline-flex;" を使用します。

CSS 構文

display: value;

プロパティの値

値 説明 Play it
inline デフォルト値。インライン要素として（例えば<span>のように）要素を表示します Play it ❯
block ブロック要素として（例えば<p>のように）要素を表示します Play it ❯
flex >ブロックレベルのフレックス・コンテナとして要素を表示します。CSS3で新規に追加されました
inline-block インラインレベル・ブロック・コンテナとして要素を表示します。このブロックの内部は、 ブロックレベルボックスとしてフォーマットされ、要素自体は、インラインレベルボックスとしてフォーマットされます
inline-flex インラインレベルのフレックス・コンテナとして要素を表示します。CSS3で新規に追加されました
inline-table 要素はインラインレベルのテーブルとして表示されます  
list-item 要素は <li> 要素のように振舞います Play it ❯
run-in コンテキストに依存し、ブロックまたはインラインとして要素を表示します  
table 要素は <table> 要素のように振る舞います
table-caption 要素は <caption> 要素のように振る舞います
table-column-group 要素は <colgroup> 要素のように振る舞います
table-header-group 要素は <thead> 要素のように振る舞います
table-footer-group 要素は <tfoot> 要素のように振る舞います
table-row-group 要素は <tbody> 要素のように振る舞います
table-cell 要素は <td> 要素のように振る舞います
table-column 要素は <col> 要素のように振る舞います
table-row 要素は <tr> 要素のように振る舞います
なし 要素は何も表示されません(レイアウトには影響ありません) Play it ❯
initial プロパティにデフォルト値を設定します。initial を参照 Play it ❯
inherit このプロパティは親要素を継承します。inherit を参照
Examples

その他の例

例

inherit プロパティ値の使用方法のデモです：

body {
    display: inline;
}

p {
    display: inherit;
}
Try it Yourself ❯

例

<div> 要素内のフレキシブル・アイテムの方向を逆順に設定します：

div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
}
Try it Yourself ❯

関連ページ

CSS チュートリアル： CSS Display and visibility

HTML DOM リファレンス：display プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯