<html>
<link rel="stylesheet" href="josh.css">
<body bgcolor="#FFFFFF">

		<div id="説明">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">display</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">4</span> IE <span class="emphasis">4</span> CSS <span class="emphasis">1</span></td>
				</tr>
				<tr>
					<td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">継承 : なし</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description"><p>すべての要素とテキストノードを囲む非表示のボックスが、ブラウザによってどのように処理されるかを決定する多目的属性です。たとえば、周辺のコンテンツに関連して要素を表示する方法だけをとってみても、ブロックレベル項目とインライン項目とではその性質はかなり異なります。CSS 仕様には、こうしたボックスのタイプが数多く用意されています。ボックスが占めるスペースは、ボーダーや表示規則 (コンパクトスタイルが定義リスト項目を制御する方法など) といった事項によって異なる影響を受けるからです。ブラウザの組み込みスタイルシートはバリエーションごとに異なるボックスを指定することがないので、実際には、一部の表示タイプ間で違いが出ることはありません。たとえば、<span class="literal">table</span> 要素は、その <span class="literal">display</span> スタイル属性が <span class="literal">block</span> または <span class="literal">table</span> に設定されていても同じように表示されます。同時に、<span class="literal">display</span> スタイルを使用すると、ブロックテーブルをインラインテーブルとして表示するなど、要素のデフォルトの表示動作を上書きできます。
</p><p>DHTML で最も頻繁に使用される <span class="literal">display</span> スタイル属性の機能は、要素とそのスペースの表示および非表示を切り替えるスクリプトを設定するというものでしょう。属性を <span class="literal">none</span> に設定すると要素は表示されなくなり、周辺すべてのコンテンツは要素が通常占める領域を埋めて広がります。これは要素が表示されていないときにそのスペースを確保しておく <span class="literal">visibility</span> 属性と異なります。ただし、デフォルトの表示モードで項目を再表示したいときは、一般的な表示タイプ (<span class="literal">block</span> と <span class="literal">inline</span>) のいずれかを指定するか、要素に関連付けられ、かつターゲットブラウザがサポートするより具体的なタイプ (<span class="literal">li</span> 要素の <span class="literal">list-item</span> など) を指定することができます。
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="csssyntax"><span class="title">CSS 構文</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>display: <span class="replaceable">displayType</span></pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="value"><span class="title">値</span></td>
				</tr>
				<tr>
					<td><p>CSS 仕様では多くの表示タイプが指定されていますが、ブラウザのサポートはより限定されています。次の表に、サポートされているタイプを示します。
</p>
						<table border="1"><tbody><tr><th>表示タイプ</th><th>Windows 版 IE</th><th>Macintosh 版 IE</th><th>NN</th><th>CSS</th></tr>
								<tr><td><span class="literal">block</span></td><td>5</td><td>4</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">compact</span></td><td>なし</td><td>なし</td><td>なし</td><td>2</td>
								</tr>
								<tr><td><span class="literal">inline</span></td><td>5</td><td>4</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">inline-block</span></td><td>5.5</td><td>なし</td><td>なし</td><td>なし</td>
								</tr>
								<tr><td><span class="literal">inline-table</span></td><td>なし</td><td>5</td><td>なし</td><td>2</td>
								</tr>
								<tr><td><span class="literal">list-item</span></td><td>5</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">marker</span></td><td>なし</td><td>なし</td><td>なし</td><td>2</td>
								</tr>
								<tr><td><span class="literal">none</span></td><td>4</td><td>4</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">run-in</span></td><td>なし</td><td>5</td><td>なし</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table</span></td><td>なし</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-caption</span></td><td>なし</td><td>5</td><td>なし</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-cell</span></td><td>なし</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-column-group</span></td><td>なし</td><td>5</td><td>なし</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-footer-group</span></td><td>5.5</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-header-group</span></td><td>5</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-row</span></td><td>なし</td><td>5</td><td>6</td><td>2</td>
								</tr>
								<tr><td><span class="literal">table-row-group</span></td><td>なし</td><td>5</td><td>6</td><td>2</td>
								</tr>
							</tbody></table>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="initvalue"><span class="title">既定値</span></td>
				</tr>
				<tr>
					<td><p>要素に依存します。</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="example"><span class="title">例</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>.hidden {display: none}</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="appliesto"><span class="title">適用先</span></td>
				</tr>
				<tr>
					<td><p>すべての要素。ただし、一部の表示タイプは特定の要素のみに適用されます。
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectmodelreference"><span class="title">オブジェクト参照</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>[window.]document.getElementById("<span class="replaceable">elementID</span>").style.display</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>