Revision 1133143 of @page

<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">概要</h2>

<p>CSS の <code>@page</code> @-規則は、文書の印刷するときの CSS プロパティの編集に使います。<code>@page</code> で変更できる CSS プロパティは限られます。変更できるのは、margin、orphans、widowsと、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。</p>

<p><code>@page</code> @-規則は、CSS オブジェクトモデルインタフェース {{domxref("CSSPageRule")}} からアクセスできます。</p>

<div class="note"><strong>注記:</strong> W3C は viewport 関連の {{cssxref("&lt;length&gt;")}} 単位、<code>vh</code>、<code>vw</code>、<code>vmin、</code><code>vmax</code> の取り扱い方について議論しています。差し当たっては、これらを <code>@page</code> at-規則の中で使わないでください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<h3 id="Descriptors" name="ディスクリプター">ディスクリプター</h3>

<dl>
 <dt><a href="https://developer.mozilla.org/ja/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
 <dd>Adds crop and/or registration marks to the document.</dd>
</dl>

<dl>
 <dt><a href="https://developer.mozilla.org/ja/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
 <dd>Specifies the extent beyond the page box at which the page rendering is clipped.</dd>
</dl>

<h3 id="形式構文">形式構文</h3>

<pre class="syntaxbox">
{{csssyntax}}
</pre>

<h2 id="Examples" name="Examples">例</h2>

<p><code>@page</code> の さまざまな<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>のページにある、利用例を参照してください。</p>

<ul>
 <li>{{Cssxref(":blank")}}</li>
 <li>{{Cssxref(":first")}}</li>
 <li>{{Cssxref(":left")}}</li>
 <li>{{Cssxref(":right")}}</li>
 <li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
 <li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
</ul>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
   <td>{{Spec2('CSS3 Paged Media')}}</td>
   <td>{{SpecName('CSS2.1')}} から変更はないが、<code>@page</code> 内でもっと多くの at-規則が使えます</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基本サポート</td>
   <td>2.0</td>
   <td>{{CompatGeckoDesktop("19.0")}}</td>
   <td>8.0</td>
   <td>6.0</td>
   <td>5.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本サポート</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("19.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>