displayプロパティ。

CSSに於ける当該要素の表示形態・displayプロパティに関する解説です。

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>要素のスタイルとなります。

尚、以下の値はかつての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擬似要素に対してのみ意味を持ちます。

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

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

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

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

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

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

displayプロパティの記述例。

例えば、.forAuralクラスを与えられた任意の要素を非表示にしたい場合は、

.forAural {
    display: none;
    }

と記述します。

displayプロパティに関する注意事項。

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

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

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

ネットスケープ 4.xでの注意事項。

ネットスケープ 4.xでは、以下の点に注意して下さい。

以上より、ネットスケープ 4.xではdisplayプロパティにはnone値以外は使わない方が安全と言えるでしょう。

WAP 2.0での注意事項。(平成18年12月19日 更新)

WAP 2.0では、displayプロパティは以下の値が必須となっておりますが、オープンウェーヴ社のWAP 2.0 ウェブブラウザでは-wap-marqueenone値以外は実装されておりません

また、-wap-marqueeを与えた場合でも、端末の電池容量を考慮して何回かでマーキーを停止する場合もあります。

その他のユーザエージェントでの注意事項。(平成19年 9月21日)

現実にはdisplayプロパティに使える値は限られております。(平成19年 9月21日)

一般に以下のプロパティ以外は使えないと思った方が良いでしょう。

但し、ユーザエージェントの実装には大きな差がある事も注意してください。

  • 多くのユーザエージェントでは、実装していない値を指定した場合には当該要素のデフォルトのdisplay値のままとなります。

以下の要素に関しては実装の差異が大きな影響を与える事もありますので特に注意してください。

表関連の要素に対してのdisplayプロパティ。(平成19年 9月21日)

表関連のdisplayプロパティ値は、ファイヤーフォックスなどのもじら系ブラウザ, オペラ 8.0以降及びサファリではほぼ完全に実装されているようです。

但し、旧式のユーザエージェントやインターネットエクスプローラでは表関連のdisplayプロパティ値を処理しないので、表関連以外の要素で用いた場合にはどうなるか分かりません。

また、旧式のユーザエージェントやインターネットエクスプローラなど、表関連のdisplayプロパティ値に対応していないユーザエージェントでは表関連の要素のdisplayプロパティ変更を無視しているようですが、ファイヤーフォックスなどでは全称セレクタなどにdisplayプロパティを与えているとその影響で表の表示が崩れる事もあります。

以上の点から、表関連の要素セレクタに対しても、必ず以下のプロパティを与えておくようにしましょう。

その他の注意すべき要素に対してのdisplayプロパティ。(平成19年 9月21日)

その他、displayプロパティに関して盲点となりがちな要素もあります。

ユーザエージェントに依っては全称セレクタなどにdisplayプロパティを与えているとその影響で思い掛けない表示になる事もありますので、以下の点を参考に適切なdisplayプロパティを与えてください。

<option>要素(フォームメニューでの選択肢)
<option>要素(フォームメニューでの選択肢)は各項目の直前直後で改行されるスタイルが一般的ですので、当然 display: block; プロパティになります。
  • ファイヤーフォックスでは display: inline; プロパティが与えられていると、選択肢が縦ではなく横に並んで表示されるようです。
<html>要素, <head>要素, <body>要素など
displayプロパティのデフォルト値はinlineです。

従って、これらの要素はdisplayプロパティを与えない限りインラインボックスで表示される事となります。

  • これら一連の要素はブロックレヴェル要素及びインライン要素のいずれにも定義されていない事を忘れないでください。
<ins>要素及び<del>要素
<ins>要素及び<del>要素は、インライン要素にもブロックレヴェル要素にもなりますが、セレクタで区別する事は不可能なので多くのユーザエージェントではインライン扱いとなっているようです。
  • インライン扱いにするのが一番表示の影響が少ないからでしょう。但しボーダなどを用いる場合には注意しましょう。

関連項目。

以下は、WAP 2.0携帯電話でのみ許される-wap-marqueeでの動作を細かく指定するためのものです。


しらぎくのウェブサイト作成入門サイトマップ