CSS3: display プロパティ - 要素の表示形式

■ 概要

項　　目説　　明
記述形式 セレクタ {display: 値 }
値 の形式 inline，block，inline-block，list-item，run-in，compact，table，inline-table，table-row-group，
table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell，
table-caption，ruby，ruby-base，ruby-text，ruby-base-group，ruby-text-group，テンプレート，none
初 期 値 inline
対応ブラウザー C1+ / e5+ / N4+ / Fx1+ / Op7+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継　　承 しない

■ 解説

display プロパティ は，float プロパティ や position プロパティ と一緒に用いて，要素が生成する ボックスの表示形式 を指定します。

指定できる値の形式は，以下のとおりです。

値説　　明
inline インライン・ボックスとして表示します。　（初期値）
block ブロック・ボックスとして表示します。
inline-block 置換要素と同様に，それ自身は単独のインライン・ボックスとして配置されるブロック・ボックスとして表示します。
inline-block の内部はブロック・ボックスとして，ボックス自身はインライン・ボックスとしてフォーマットされます。
list-item １個以上のブロック・ボックスと マーカー・ボックス として表示されます。
run-in 最終的に表示形式がインライン・レベルかブロック・レベルかに応じて，インライン・ボックスかブロック・ボックスのどちらかとして表示します。
compact 最終的な表示形式に応じて，ブロック・ボックスか マーカー・ボックス のどちらかとして表示します。
table 未詳（tableモジュールとして策定予定）。
inline-table 未詳（tableモジュールとして策定予定）。
table-row-group 未詳（tableモジュールとして策定予定）。
table-header-group 未詳（tableモジュールとして策定予定）。
table-footer-group 未詳（tableモジュールとして策定予定）。
table-row 未詳（tableモジュールとして策定予定）。
table-column-group 未詳（tableモジュールとして策定予定）。
table-column 未詳（tableモジュールとして策定予定）。
table-cell 未詳（tableモジュールとして策定予定）。
table-caption 未詳（tableモジュールとして策定予定）。
ruby 要素が ルビ・コンテナ・ボックス（ruby container box） を生成することを指定します。　（<ruby>要素）
ruby-base 要素が ルビ・ベース・ボックス（ruby base box） を生成することを指定します。　（<rb>要素）
ruby-text 要素が ルビ注釈ボックス（ruby annotation box） を生成することを指定します。　（<rt>要素）
ruby-base-container 要素が ルビ・ベース・コンテナ・ボックス（ruby base container box） を生成することを指定します。　（XHTML の <rbc>要素）
ruby-text-container 要素が ルビ注釈コンテナ・ボックス（ruby annotation container box） を生成することを指定します。　（<ruby>要素）
テンプレート 現在策定中です。　こちら を参照。
none 要素，および，子孫要素はボックスを生成しません（その要素の存在は配置に関して何の影響も及ぼしません）。
また，この指定を，子孫要素の display プロパティ で上書きすることはできません。

■ 使用例（ display プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
   div.sample {
      margin: 10px;
      padding: 5px;
      font-size: 20px;
      background-color: #cfcfcf;
   }
   .disp1 { display: inline; }
   .disp2 { display: block; }
   .disp3 { display: inline-block; }
   .disp4 { display: list-item; }
   .disp5 { display: none; }
-->
</style>
HTML
<body> ～ </body>		 
<div class="sample disp1">{display: inline;} のテキスト</div>
<div class="sample disp2">{display: block;} のテキスト</div>
<div class="sample disp3">{display: inline-block;} のテキスト</div>
<div class="sample disp4">{display: list-item;} のテキスト</div>
<div class="sample disp5">{display: none;} のテキスト</div>

ブラウザー 表示例

{display: inline;} のテキスト
{display: block;} のテキスト
{display: inline-block;} のテキスト
{display: list-item;} のテキスト
{display: none;} のテキスト

■ 備考

【参考ページ】