CSS

Cascading Style Sheets display property.

display

　ボックスの表示形式を設定します。

書式

display: 値

適用対象

すべての要素

初期値

inline

値の継承

しない

指定できる値

block

ブロックレベル要素と同様に表示します。

inline

インライン要素と同様に表示します。

inline-block（ CSS2.1 で追加 ）

要素自体はインラインの置換要素のように配置されるのですが、その内部はブロックレベル要素のようになっているタイプの表示形式です。CSS2.1 では、textarea要素や select要素などがこの形式に該当します。

none

表示しません。透明になるのではなく、ボックス自体がなくなります。この値が指定された要素は、多くの音声ブラウザやスクリーンリーダーで読みあげられなくなることが確認されていますので注意してください（ media 属性で対象メディアを screen などに限定しても結果は同じです）。

インライン要素をブロックレベル要素のように表示させる

　この例では、a 要素をブロックレベル要素と同様に表示させています。

a {
	display: block;
	margin: 1.5em;
	padding: 0.2em;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background: #339900;
}

<p>
	<a href="link1.html">リンク1</a>
	<a href="link2.html">リンク2</a>
	<a href="link3.html">リンク3</a>
</p>

label 要素への適用例

　この例では、テキストと入力フィールドを含む label要素を、ブロックレベル要素と同様に表示させています。

label {
	display: block;
	margin: 1.5em;
}

<form action="">
	<p>
		<label>名前：<input type="text" /></label>
		<label>住所：<input type="text" /></label>
		<label>電話：<input type="text" /></label>
	</p>
</form>

ボックスを消す

　この例では、最初の段落のボックスは表示されません。同時に、IBM の音声ブラウザであるホームページリーダー3.02では読み上げられなくなります。

.c1 {
	display: none;
}

<p class="c1">CSS に対応したブラウザでは、この段落は表示されません。</p>

<h2>見出し</h2>

<p>「見出し」の上に段落が１つあります。</p>