displayプロパティ。

displayプロパティの扱い。

• 読み飛ばす

継承の有無

displayプロパティは、上位要素から継承されません。

対象セレクタ

対象となるセレクタに制限はありません。

対象メディア

視覚系のメディア全てが対象となります。

displayプロパティの書式。

displayプロパティの書式は、以下のようになります。

display: 値

値としては、以下のものが取れます。

• 読み飛ばす

inherit

一番近い上位要素で指定された値を継承します。

none

当該要素を非表示にします。レイアウト上、当該要素は存在していないかのように扱われます。

また、この値を与えられた要素の下位要素は、それらに与えられたdisplayプロパティの値に拘らず表示されなくなります。

inline

インラインボックスの表示となります(デフォルト)。

HTMLでは、インライン要素となっている要素にはデフォルトでこのスタイルが当てられております。

block

ブロックレヴェルボックスの表示となります。

HTMLでは、ブロックレヴェル要素となっている要素にはデフォルトでこのスタイルが当てられております。

list-item

ブロックレヴェルボックスの表示となりますが、リストアイテムの表示方式になります。

HTMLでは<li>要素にのみデフォルトでこのスタイルが当てられております。

run-in

ラン・インボックスの表示となります。

HTMLには該当する要素は無いようです。

table

表(テーブル)の表示スタイル(基本的にはブロックレヴェルボックス)となります。

inline-table

インライン表(テーブル)の表示スタイル(基本的にはインラインボックス)となります。

HTMLには実在しませんが、前後で改行しない表(テーブル)の表示スタイルです。

table-row-group

表(テーブル)の行グループの表示スタイルとなります。HTMLでは<tbody>要素のスタイルとなります。

table-header-group

表(テーブル)のヘッダグループの表示スタイル(HTMLでは<thead>要素のスタイル)となります。具体的にはこのプロパティ値を与えられていない全ての行の前、表題が表の上にある場合にはその直後(すなわち、表の上にある表題とこのプロパティ値を与えられていない全ての行の間)に表示されます。

• プリンタに対するスタイルシートに於いては、表が複数ページに跨る場合には、二ページ目以降の表にもこのプロパティ値を与えられた要素を一番上に表示するようにしても良い事となっております。

table-footer-group

表(テーブル)のフッタグループの表示スタイル(HTMLでは<tfoot>要素のスタイル)となります。具体的にはこのプロパティ値を与えられていない全ての行の後、表題が表の下にある場合には園直前(すなわち、このプロパティ値を与えられていない全ての行と表の下にある表題の間)に表示されます。

• プリンタに対するスタイルシートに於いては、表が複数ページに跨る場合には、最終ページより前の表にもこのプロパティ値を与えられた要素を一番下に表示するようにしても良い事となっております。

table-row

表(テーブル)の行成分の表示スタイルとなります。HTMLでは<tr>要素のスタイルとなります。

table-column-group

表(テーブル)の列グループの表示スタイルとなります。HTMLでは<colgroup>要素のスタイルとなります。

table-column

表(テーブル)の列の表示スタイルとなります。HTMLでは<col>要素のスタイルとなります。

table-cell

表(テーブル)のコマの表示スタイル(基本的にはブロックレヴェルボックス)となります。HTMLでは<th>要素及び<td>要素のスタイルとなります。

table-caption

表(テーブル)の表題の表示スタイルとなります。HTMLでは<caption>要素のスタイルとなります。

• caption-sideプロパティもご参照下さい。

尚、以下の値はかつてのCSS第二水準第一改訂版(CSS 2.1)では定められておりませんでしたが、CSS第二水準第一改訂版(CSS 2.1)で追加された値です。

inline-block

行内に配置されるブロックレヴェルボックスを生成します。

すなわち、前後で改行されないブロックレヴェルボックスを生成します。

• inline値と異なり、幅や高さの概念を持ちます。

また、以下の値はかつてのCSS第二水準第一改訂版(CSS 2.1)では定められておりましたが、現行のCSS第二水準第一改訂版(CSS 2.1)からは削除されております。

compact

コンパクトボックスの表示となります。

HTMLでは、compact属性値を附与した<dl>要素直下の<dt>要素にのみデフォルトでこのスタイルが当てられているようです。

marker

リストアイテムの前に付けるマーカの表示スタイルとなります。

list-item値を持つ要素に対する:before擬似要素または:after擬似要素に対してのみ意味を持ちます。

• HTMLでは<li>要素の直前(:before擬似要素)にこの表示スタイルが当てられると考えられます。

list-item値を持つ要素に対する:before擬似要素または:after擬似要素が、このスタイルを持つ場合、当該要素にデフォルトで与えられるマーカは表示されず、この擬似要素がマーカとして機能します。

• 実際には殆ど実装されておらず、実装されていない場合は当該要素のデフォルトマーカとこのスタイルを当てた擬似要素が双方表示されてしまいます。

また、この表示スタイルのボックスには、パディングと枠線が定義されますが、余白(マージン)は定義されません。

尚、セレクタがlist-item値を持つ要素に対する:before擬似要素または:after擬似要素以外の場合は無効となり、inline値と見なされます。

加えて、以下の値は WAP 2.0携帯電話でのみ有効な、非公式値です。

• PCではオペラ 7.x以降を除いて利用出来ません。

-wap-marquee

ブロックレヴェル要素ですが、内容となるコンテンツが自動的にスクロールします。

displayプロパティの仕様上の注意。

• displayプロパティはかつてのCSS第二水準(CSS 2)ではサポートしなくても構わないとされておりましたが、現行のCSS第二水準第一改訂版(CSS 2.1)ではサポートが義務付けられております。
• marker値及びcompact値は、CSS第二水準第一改訂版(CSS 2.1)では廃止されました。

displayプロパティの実装上の注意。(平成19年 9月21日)