display 【要素の表示形式を指定する】
[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]
displayプロパティは、要素の表示形式を指定する際に使用します。その要素がブロックレベルなのかインラインなのかを指定したい場合に使用します。
ブロックレベル要素とインライン要素について詳しく知りたい方はこちらを参照して下さい。
ブロックレベル要素とインライン要素
none
表示されません。
block
指定要素がブロックレベル要素として表示されます。
inline
指定要素がインライン要素として表示されます。
list-item
指定要素の内容をリストとして表示します。
marker
リストのマーカーのためのボックスを生成します。この値は、:before擬似要素および :after擬似要素にのみ適用することができます。
compact
この値は、前後の状況により自動で表示形式を判断します。指定要素の後にくるブロックレベル要素が、回り込みや絶対配置の指定がされてなく、指定要素の内容の幅が、後にくるブロックレベル要素の左マージンの幅以下で1行で収まる場合には、その左マージン内にインラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。
run-in
この値は、前後の状況により自動で表示形式を判断します。指定要素の後にくるブロックレベル要素が、回り込みや絶対配置の指定がされていない場合に、その先頭にインラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。
displayの使用例
CSSファイル
.sample001 {
display: block;
background-color: #ffcccc;
}
.sample002 {
display: inline;
background-color: #ccccff;
}
HTMLソース
<span class="sample001">display: block;</span>
spanをブロックレベルに
<br />
<div class="sample002">display: inline;</div>
divをインラインに
表示すると
display: block;spanをブロックレベルに表示・配置関連項目
| overflow(x y) | はみ出た内容の表示方法を指定する |
| position | 要素の配置方法を指定する |
| top | 上からの配置位置(距離)を指定する |
| right | 右からの配置位置(距離)を指定する |
| bottom | 下からの配置位置(距離)を指定する |
| left | 左からの配置位置(距離)を指定する |
| display | 要素の形式(ブロック・インライン)を指定する |
| float | 左寄せ、右寄せ配置の指定 |
| clear | 回り込み(float)を解除する |
| z-index | 重なりの順序を指定する |
| visibility | ボックスの表示・非表示を指定する |
| clip | ボックスを切り抜き表示(クリッピング)する |
| direction | 文字表記の方向(左右)を指定する |
| unicode-bidi | Unicodeの文字表記の方向を上書きする |
| writing-mode | 文字表記の方向(縦横)を指定する(IE独自) |
