display
要素の表示形式（ブロック/インライン）を指定するプロパティ。
displayを指定することで、hxタグ、divタグ、pタグといったブロック要素をHTMLタグをインライン要素で、spanタグ、strongタグ、imgタグといったインライン要素のHTMLタグをブロック要素で表示させることができる。また、要素を非表示にすることもできる。
CSSレイアウトでは、clearによる回り込み解除の際に、clear指定されたボックス内部の要素を、displayで非表示にすることで、体裁を崩さずに回り込みを解除することができる。
値
| inline | 指定した要素をインラインで表示。 |
|---|---|
| block | 指定した要素をブロックで表示。 |
| none | 指定した要素およびそれに内包される要素を非表示。 |
使用例 - サンプル(A) / サンプル(B) / サンプル(C)
サンプル(A)
[CSSの記述]
.sampleA { display:inline; }
[HTMLの記述]
<div class="sampleA">テキストテキスト</div> <div class="sampleA">テキストテキスト</div>
[ブラウザ上の表示]
ブロック要素のDIVタグ
をインラインで表示
サンプル(B)
[CSSの記述]
.sampleB { display:block; }
[HTMLの記述]
<span class="sampleB">テキストテキスト</span> <span class="sampleB">テキストテキスト</span>
[ブラウザ上の表示]
インライン要素のSPANタグ をブロックで表示サンプル(C)
[CSSの記述]
.sampleC { display:none; }
[HTMLの記述]
<p>テキスト<span class="sampleC">テキスト</span>テキスト</p>
[ブラウザ上の表示]
テキストテキスト