CSSで、表示方法を指定するdisplayプロパティに関する解説です。
displayプロパティの実装上の注意 (平成19年 9月21日)
その他のユーザエージェントでの注意事項 (平成19年 9月21日)
現実にはdisplayプロパティに使える値は限られております (平成19年 9月21日)
displayプロパティは、表示方法を指定するプロパティです。
displayプロパティの書式は、以下のようになります。
display: 値値としては、以下のものが取れます。
inheritnone当該要素を非表示にします。レイアウト上、当該要素は存在していないかのように扱われます。
また、この値を与えられた要素の下位要素は、それらに与えられたdisplayプロパティの値に拘らず表示されなくなります。
inlineインラインボックスの表示となります(デフォルト)。
HTMLでは、インライン要素となっている要素にはデフォルトでこのスタイルが当てられております。
blockブロックレヴェルボックスの表示となります。
HTMLでは、ブロックレヴェル要素となっている要素にはデフォルトでこのスタイルが当てられております。
list-itemブロックレヴェルボックスの表示となりますが、リストアイテムの表示方式になります。
HTMLでは<li>要素にのみデフォルトでこのスタイルが当てられております。
run-inラン・インボックスの表示となります。
HTMLには該当する要素は無いようです。
compactコンパクトボックスの表示となります。
HTMLでは、compact属性値を附与した<dl>要素直下の<dt>要素にのみデフォルトでこのスタイルが当てられているようです。
tableinline-tableインライン表(テーブル)の表示スタイル(基本的にはインラインボックス)となります。
HTMLには実在しませんが、前後で改行しない表(テーブル)の表示スタイルです。
table-row-grouptable-header-group表(テーブル)のヘッダグループの表示スタイル(HTMLでは<thead>要素のスタイル)となります。具体的にはこのプロパティ値を与えられていない全ての行の前、表題が表の上にある場合にはその直後(すなわち、表の上にある表題とこのプロパティ値を与えられていない全ての行の間)に表示されます。
table-footer-group表(テーブル)のフッタグループの表示スタイル(HTMLでは<tfoot>要素のスタイル)となります。具体的にはこのプロパティ値を与えられていない全ての行の後、表題が表の下にある場合には園直前(すなわち、このプロパティ値を与えられていない全ての行と表の下にある表題の間)に表示されます。
table-rowtable-column-grouptable-columntable-celltable-caption表(テーブル)の表題の表示スタイルとなります。HTMLでは<caption>要素のスタイルとなります。
以下の値は、WAP 2.0携帯電話でのみ有効な、非公式プロパティ値です。
但し、以下の値は現在策定中のCSS第二水準第一改訂版(CSS 2.1)からは削除される予定になっております。
markerリストアイテムの前に付けるマーカの表示スタイルとなります。
list-item値を持つ要素に対する:before擬似要素または:after擬似要素に対してのみ意味を持ちます。
list-item値を持つ要素に対する:before擬似要素または:after擬似要素が、このスタイルを持つ場合、当該要素にデフォルトで与えられるマーカは表示されず、この擬似要素がマーカとして機能します。
また、この表示スタイルのボックスには、パディングと枠線が定義されますが、余白(マージン)は定義されません。
尚、セレクタがlist-item値を持つ要素に対する:before擬似要素または:after擬似要素以外の場合は無効となり、inline値と見なされます。
また、以下の値が現在策定中のCSS第二水準第一改訂版(CSS 2.1)に追加される予定になっております。
inline-block行内に配置されるブロックレヴェルボックスを生成します。
すなわち、前後で改行されないブロックレヴェルボックスを生成します。
inline値と異なり、幅や高さの概念を持ちます。例えば、.forAuralクラスを与えられた任意の要素を非表示にしたい場合は、
.forAural {display: none;}
と記述します。
marker値は、現在策定中のCSS第二水準第一改訂版(CSS 2.1)では廃止される予定となっております。ネットスケープ 4.xでは、以下の点に注意して下さい。
inline値, block値及びnone値しか認識しません。block値を与えると、アンカーとして機能しなくなります。block値が当てられ、変更出来なくなります。inline値を与えると、表示が崩れる恐れがあります。以上より、ネットスケープ 4.xではdisplayプロパティにはnone値以外は使わない方が安全と言えるでしょう。
WAP 2.0では、displayプロパティは以下の値が必須となっておりますが、オープンウェーヴ社のWAP 2.0 ウェブブラウザでは-wap-marquee値とnone値以外は実装されておりません。
また、-wap-marquee値を与えた場合でも、端末の電池容量を考慮して何回かでマーキーを停止する場合もあります。
一般に以下のプロパティ以外は使えないと思った方が良いでしょう。
none値inline値block値list-item値compact値(オペラ 6.x以降のみ)run-in値(オペラ 6.x以降のみ)但し、ユーザエージェントの実装には大きな差がある事も注意してください。
以下の要素に関しては実装の差異が大きな影響を与える事もありますので特に注意してください。
表関連のdisplayプロパティ値は、ファイヤーフォックスなどのもじら系ブラウザ, オペラ 8.0以降及びサファリではほぼ完全に実装されているようです。
但し、旧式のユーザエージェントやインターネットエクスプローラでは表関連のdisplayプロパティ値を処理しないので、表関連以外の要素で用いた場合にはどうなるか分かりません。
また、旧式のユーザエージェントやインターネットエクスプローラなど、表関連のdisplayプロパティ値に対応していないユーザエージェントでは表関連の要素のdisplayプロパティ変更を無視しているようですが、ファイヤーフォックスなどでは全称セレクタなどにdisplayプロパティを与えているとその影響で表の表示が崩れる事もあります。
以上の点から、表関連の要素セレクタに対しても、必ず以下のプロパティを与えておくようにしましょう。
その他、displayプロパティに関して盲点となりがちな要素もあります。
ユーザエージェントに依っては全称セレクタなどにdisplayプロパティを与えているとその影響で思い掛けない表示になる事もありますので、以下の点を参考に適切なdisplayプロパティを与えてください。
<option>要素(フォームメニューでの選択肢)は各項目の直前直後で改行されるスタイルが一般的ですので、当然 display: block; プロパティになります。
display: inline; プロパティが与えられていると、選択肢が縦ではなく横に並んで表示されるようです。displayプロパティのデフォルト値はinline値です。
従って、これらの要素はdisplayプロパティを与えない限りインラインボックスで表示される事となります。
<ins>要素及び<del>要素は、インライン要素にもブロックレヴェル要素にもなりますが、セレクタで区別する事は不可能なので多くのユーザエージェントではインライン扱いとなっているようです。
以下は、WAP 2.0携帯電話でのみ許される-wap-marquee値での動作を細かく指定するためのものです。
