<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">page-break-after、page-break-before</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">7</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>ドキュメントを印刷する際に要素周辺の改ページの処理を指定します。画面上では長いコンテンツフローも連続してスクロール表示するため、改ページはワープロプログラムで表示されるようにはブラウザでは表示されません。
</p><p>プリンタ用にページを正しく処理するには、<span class="emphasis">page box</span> という CSS2 の概念が必要です。page box とは、最終的に印刷されるページまで届く領域です。改ページスタイル属性を使用すると、ブラウザで各ページボックスのコンテンツを正確に制御できます。他の補助設定または <span class="literal">auto</span> 設定を使用しないと、ブラウザは以前は各ページの空間に入るだけコンテンツを埋めていたように印刷するページを区切ります。
</p><p>要素上で強制的に改ページするには <span class="literal">page-break-before:always</span> スタイル設定を要素に指定します。同様に、要素の後で強制的に改行するには <span class="literal">page-break-after:always</span> を使用します。たとえば、<span class="literal">br</span> 要素の特別なクラスの後で改行するには、クラスセレクタスタイル規則を次のように設定します。
</p><p>また、ドキュメントに改ページを強制するには、次のタグを使用します。
</p><p><span class="literal">left</span> と <span class="literal">right</span> の属性設定では、ブラウザに両面印刷の際にページが左側か右側かを検出する機能があることを仮定します。この機能は CSS2 に指定されています。各エッジのガッターのマージンには異なる設定を行うことが多いので、改ページ後の新しいセクションの開始方法を指定するには十分な改ページで新しいセクションを希望のページに配置する必要があります。たとえば、すべての <span class="literal">h1</span> 要素を右側のページから始めるには、次のように改ページスタイルを設定します。
</p><p>この属性を使用するとブラウザで <span class="literal">h1</span> 要素の前に 1 つか 2 つの改ページを行い、右側のページから始まるようにします。ブラウザが左または右の値に 2 つ目の改ページを行うと、2 つ目の改ページに空のページボックスを生成します。
</p><p>これらの属性は完全には実装されていません。IE 4 でもある程度は機能しますが、IE 5 以降をターゲットにする必要があります。その場合でも、最近の IE のバージョンと Netscape 7 でサポートされている設定は、<span class="literal">always</span> と <span class="literal">auto</span> だけです。また、スクリプトを使用して、CSS の <span class="literal">avoid</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>page-break-after: <span class="replaceable">breakType</span>
page-break-before: <span class="replaceable">breakType</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>Internet Explorer 4 では、<span class="literal">always</span>、<span class="literal">auto</span>、<span class="literal">left</span>、および <span class="literal">right</span> の 4 つの定数値が認識されます。ただし、<span class="literal">left</span> と <span class="literal">right</span> は <span class="literal">always</span> と同じように処理されます。CSS2 には <span class="literal">avoid</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">auto</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.titlePage {page-break-before: always; page-break-after: always}</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.pageBreakAfter
[window.]document.getElementById("<span class="replaceable">elementID</span>").style.pageBreakBefore</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>