display

displayプロパティは要素が生成するボックスをどのように表示させるか、その表示形式を指定します。通常、要素型はそれぞれブロック要素とインライン要素の2種類に大別されますが、displayプロパティでは各要素に別の種類を割り当てることができます。

値

none
block
inline
inline-block
run-in
list-item
table
inline-table
table-row
table-row-group
table-header-group
table-footer-group
table-column
table-column-group
table-cell
table-caption
inherit

初期値

inline

適用対象

すべての要素

継承

しない

メディア

all

displayプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

none: 何も表示しない（当該要素分の空白も生成されない）; "none" の値の効果は、当該要素が生成するボックスの表示の有無を指定する visibilityプロパティの値に "hidden" が指定された場合とは異なり、当該要素分の空白も生成されず、そのスペースは前後が詰めて何もないものとして表示されます。ただし、この "none" には制作者の動機的問題があって、一時期、"visibility : hidden ;" や "display : none ;" といった要素を消したり・非表示にする手法を利用して検索エンジンのロボットにだけ上位表示させたいキーワードを収集させ、検索エンジンを欺くような隠しテキストを作る小細工が横行したことがありました。現在では、このような行為は検索エンジンスパム行為として、スパム行為を行っている文書に対して、またはスパムの程度によってはドメイン単位でペナルティ（検索結果の表示順位の下落や検索結果からの削除）が課せられるとされています。このため、無意味にむやみやたらと要素を CSS で消したり・非表示にする等の誤解を招くような使い方はできるかぎり避けた方が無難なようです。
block: ブロック要素にする
inline: インライン要素にする
inline-block: インラインブロック要素にする; Win版Internet Explorer, Opera, Safari のみ対応。インライン要素のように文節・語句単位で行内にレンダリング（描写）されるのですが、ブロック要素のように高さ・横幅を指定でき、さらには上下のマージンも存在します。
run-in: ランインボックスにする; Opera, Safari, Mac版Internet Explorer 5 のみ対応。"run-in" を指定した要素は、その後に続くブロック要素の中に埋め込まれてインライン要素のように表示されます。たとえば、h2要素と p要素が続いている場合に、h2要素に "run-in" を指定すると、p要素の段落領域の中に h2要素の内容が埋め込まれる形になります（サンプル参照）。
list-item: リスト要素の項目（li要素）にする; リスト要素として認識されるようになるため、li要素と同じようにリスト関連プロパティでその表示を指定することができます。
table: ブロックの表要素（table要素）にする; Firefox, Opera, Safari のみ対応。"table" 関連のキーワードは、(X)HTML文書で使うような場面はありません。たとえば、XML で記述された文書を XSLT で XHTML文書として表示させる場合の表組としての整形を行うために使用されることがあります。(X)HTML文書であれば、わざわざ CSS で面倒な事をしなくとも通常通り表要素を使って表を作成すれば良いでしょう。
inline-table: インラインの表要素（table要素）にする; "table" の値に同じ。
table-row: 表の行要素（tr要素）にする; "table" の値に同じ。
table-row-group: 表の本体の行グループ要素（tbody要素）にする; "table" の値に同じ。
table-header-group: 表のヘッダの行グループ要素（thead要素）にする; "table" の値に同じ。
table-footer-group: 表のフッタの行グループ要素（tfoot要素）にする; "table" の値に同じ。
table-column: 表の列要素（col要素）にする; "table" の値に同じ。
table-column-group: 表の列グループ要素（colgroup要素）にする; "table" の値に同じ。
table-cell: 表のセル要素（td要素, th要素）にする; "table" の値に同じ。
table-caption: 表のキャプション要素（caption要素）にする; "table" の値に同じ。

CSS2.1 より、"compact" と "marker" の値は削除され、新たに "inline-block" の値が追加されました。

displayプロパティの実装状況

Windows版Internet Explorer: "run-in", "table", "inline-table", "table-row", "table-row-group", "table-header-group", "table-footer-group", "table-column", "table-column-group", "table-cell", "table-caption" の値は未実装
Firefox: "inline-block", "run-in" の値は未実装（これらは Firefox 3 にて対応予定）
Opera: ○（すべてのキーワードを実装済み）
Safari: ○（すべてのキーワードを実装済み）
Macintosh版Internet Explorer 5: "inline-block", "table", "inline-table", "table-row", "table-row-group", "table-header-group", "table-footer-group", "table-column", "table-column-group", "table-cell", "table-caption" の値は未実装

サンプル

記述例

h2 { display : run-in ;  color : #136 ; }
......
<h2>段落に埋もれるh2要素</h2><p>h2要素をのみ込んでしまう段落</p>

表示例

現在位置

ナビゲーション

World Wide Web Guide

ステータス情報

作者: 上田遼
公開: 2007-02-02T16:14:09+09:00
更新: 2008-12-29T04:30:37+09:00
URI: http://w3g.jp/css/display_position/display

検索

直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイムみんなのお国じまん New!