WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > display
display  表示方法 

要素の表示形式(ブロック・インライン等)を指定する。

このエントリーをはてなブックマークに追加

パラメータ

none …無しにする。
block …ブロック要素にする。
inline …インライン要素にする。
list-item …リスト要素にする(箇条書きの項目)。
marker …リスト要素のマーカーのためのボックスを生成します。
 :before擬似要素 :after擬似要素にのみ適用す。
compact …自動的にブロック要素・インライン要素に。
 指定要素の後にくるブロックレベル要素が、回り込み(float)または絶対配置されておらず、指定要素の内容の幅が、後にくるブロックレベル要素の左マージンの幅以下で1行で収まる場合には、その左マージン内にインラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。
run-in …自動的にブロック要素・インライン要素に。
 指定要素の後にくるブロックレベル要素が、回り込み(float)または絶対配置されていない場合には、その先頭にインラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。


table,inline-table,table-caption,
table-row,table-cell,table-column,
table-row-group,table-column-group,
table-header-group,table-footer-group
テーブル関連の要素に類似した要素を定義する

通常のSPAN

あいうえおかきくけこ

display:blockのSPAN

あいうえおかきくけこ

通常のDIV

あいうえお
かきくけこ

display:inlineのDIV

あいうえお
かきくけこ

通常のDIV

あいうえお
かきくけこ

display:noneのDIV

<div style="background-color:#f0f0ff;display:none;">あいうえお</div>
<div style="background-color:#fff0f0;display:none;">かきくけこ</div>
<div style="background-color:#f0fff0;">さしすせそ</div>
あいうえお
かきくけこ
さしすせそ