display（表示形式）

解説

エレメント（要素）の表示形式を指定する属性です。例えば、

を

に変更したり出来ます。

値	inline： block： list-item：リストアイテムエレメント（HTMLのliエレメント） run-in：の改行を解除する compact：HTMLのdl、ulエレメントのcompactアトリビュートの扱い marker： table：HTMLのtableエレメント（ブロックレベル） inline-table：HTMLのtableエレメント（インラインレベル） 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のtd、thエレメント table-caption：HTMLのcaptionエレメント none：非表示、visibility:hidden（空白）とは違いレイアウトに影響無し
初期値	inline
%値の基準
適用	すべてのエレメント
継承	しない

対応状況

inline

block

list-item

none

その他

list-itemの場合

以外は、ブロックレベルにはなりますが、黒丸は表示されません。

使用例

ソース

スタイル部に、

.inline{display:inline;}
.block{display:block;}
.list-item{display:list-item;
list-style-type:disc;}
.none{display:none;}
.compact{display:compact;}

と記述し、

body部に、

<div>imgはインラインエレメントですが、
<img class="block" src="../img/poko.gif" width="32" height="32" alt="★" title="pokochan">
この画像は、ブロックレベルになっているので、改行されます。</div>
<br>
<div>divはブロックレベルエレメントですが、
<div class="inline">このdivエレメントをインラインにしているので、</div>
改行されません。</div>
<br>
<div>spanはインラインエレメントですが、
<span class="block">このspanエレメントをブロックレベルにしているので、</span>
改行されます。</div>
<br>
<div>divはブロックレベルエレメントですが、
<div class="none">このdivエレメントを非表示にしているので、</div>
表示されずレイアウトにも影響ありません。</div>
<br>
<div>spanはインラインエレメントですが、
<span class="list-item">このspanエレメントをリストアイテムにしているので、ブロックレベルになり黒丸が表示されます。</span></div>
<dl class="compact"><dt>ここは<dd>改行しない。</dl>

と記述すると。

表示＆操作

imgはインラインエレメントですが、

この画像は、ブロックレベルになっているので、改行されます。

divはブロックレベルエレメントですが、

このdivエレメントをインラインにしているので、

改行されません。

spanはインラインエレメントですが、このspanエレメントをブロックレベルにしているので、改行されます。

divはブロックレベルエレメントですが、

このdivエレメントを非表示にしているので、

表示されずレイアウトにも影響ありません。

spanはインラインエレメントですが、このspanエレメントをリストアイテムにしているので、ブロックレベルになり黒丸が表示されます。

ここは: 改行しない。

と表示されます。

pokochan@mx1.tees.ne.jp