display

CSSプロパティ「display」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

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>

[ブラウザ上の表示]

テキストテキストテキスト