<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">overflow</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">6</span> IE <span class="emphasis">4</span> CSS <span class="emphasis">2</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>表示されたサイズがコンテナの高さや幅を超えた場合に、要素のコンテンツを処理する方法を定義します。固定幅が必要なコンテンツタイプ (<span class="literal">pre</span> 要素など) を除き、要素のデフォルト設定の動作は <span class="literal">width</span> 属性の設定を優先させて要素の高さのオーバーフローの問題を処理します。スクロールバーの表示を制御するために <span class="literal">overflow</span> プロパティを body 要素に割り当てると、ブラウザ間の互換性の問題が生じます。overflow のコードは、Windows 版 IE (旧バージョンとの互換モードと標準準拠モード)、Macintosh 版 IE、および Netscape 6 で詳細にテストしてください。
</p><p><span class="literal">visible</span> を設定するとコンテナブロックが広がり、表示されるコンテンツの最大の幅 (固定されている場合) と高さで表示されます。ボーダー、マージン、余白を要素に設定している場合、拡張されたコンテンツブロックでその設定が保持されます。要素の高さ、幅、および背景イメージまたは背景色が指定されていて、コンテンツが指定されたサイズを超えている場合、結果はブラウザによって異なります。Windows 版 IE では、コンテンツに合わせて背景の高さが拡張され、収まらなかったコンテンツの分だけ後続のコンテンツが押し下げられます。Macintosh 版 IE と Netscape 6 では、背景の領域が指定されたサイズに保たれますが、コンテンツが領域からはみ出し、その要素の後のコンテンツと重なります。これが <span class="literal">overflow</span> スタイルプロパティの既定値なので、要素のサイズを制限するときは他の値を指定するか、配置された要素についてはクリッピングの長方形を指定する必要があります。
</p><p><span class="literal">hidden</span> を設定するとブロックの高さと幅は変更されず、ブロックのサイズでコンテンツがクリップされる可能性があります。ボーダーと余白はそのままですが、マージンの設定はコンテンツをクリップする端では失われます。この値では、スクロールバーは表示されません。
</p><p><span class="literal">scroll</span> を設定すると、必要かどうかに関係なく、コンテンツブロックの領域中に横と縦のスクロールバーが表示されます。コンテンツがどちらかの方向にスクロールされる必要がある時にだけ、バーはアクティブになります。
</p><p><span class="literal">auto</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>overflow: <span class="replaceable">overFlowType</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>次の定数値のいずれか : <span class="literal">auto</span> | <span class="literal">hidden</span> | <span class="literal">scroll</span> | <span class="literal">visible</span>
</p>
					</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><span class="literal">visible</span></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>div.aside {position: absolute; top: 200px; left: 10px; height: 100px;
width: 150px; overflow: scroll}</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.overflow</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>