ウェブランサー

display - 要素の表示形式を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素
継承 しない

displayプロパティは、要素の表示形式を指定する際に使用します。その要素がブロックレベルなのかインラインなのかを指定したい場合に使用します。

displayに与えられる値

display: none;
表示されません。
display: block;
指定要素がブロックレベル要素として表示されます。
display: inline;
指定要素がインライン要素として表示されます。
display: list-item;
指定要素の内容をリストとして表示します。
display: marker;
リストのマーカーのためのボックスを生成します。この値は、:before擬似要素および :after擬似要素にのみ適用することができます。
display: compact;
この値は、前後の状況により自動で表示形式を判断します。指定要素の後にくるブロックレベル要素が、回り込みや絶対配置の指定がされてなく、指定要素の内容の幅が、後にくるブロックレベル要素の左マージンの幅以下で1行で収まる場合には、その左マージン内にインラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。
display: run-in;
この値は、前後の状況により自動で表示形式を判断します。指定要素の後にくるブロックレベル要素が、回り込みや絶対配置の指定がされていない場合に、その先頭にインラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。
display: -wap-marquee;
「WAP」はモバイルデバイス向けに導入された技術仕様で、XHTML+CSSで記述する携帯サイトで「流れる文字(マーキー)」を実現したい場合は、この値を記述する必要があります。

displayの使用サンプル

CSS
.box_sample {
 width: 300px;
 border: 1px solid #333333;
 padding: 5px;
 margin: 0px 0px 10px 0px;
}
.sample01 {
 display: block;
 color: #FFFFFF;
 background: #333333;
}
.sample02 {
 display: inline;
 color: #FFFFFF;
 background: #333333;
}
XHTML
<div class="box_sample">
<span class="sample01">span[display: block;]</span>
</div>
<div class="box_sample">
<div class="sample02">div[display: inline;]</div>
</div>
表示確認
span[display: block;]
div[display: inline;]

displayに関連するCSSプロパティ

要素の表示や配置方法
alignment-adjust 要素の水平位置を揃える基準を指定する
alignment-baseline 要素の水平位置を揃える際に親要素との相対関係に基いて指定する
bottom positionに従って要素を配置する際に、底辺からの距離を指定する
clear 要素の回り込み(float)を解除する
clip 要素の回り込み(float)を解除する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left positionに従って要素を配置する際に、左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-style 要素からはみ出した内容の表示スタイルを指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right positionに従って要素を配置する際に、右辺からの距離を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する
zoom 要素の表示倍率(拡大・縮小)を指定する