initial commit

4 files changed, 416 insertions, 0 deletions

diff --git a/files/ja/web/css/@page/bleed/index.html b/files/ja/web/css/@page/bleed/index.html
new file mode 100644
index 0000000000..83bc2b853c
--- /dev/null
+++ b/files/ja/web/css/@page/bleed/index.html
@@ -0,0 +1,81 @@
+---
+title: bleed
+slug: Web/CSS/@page/bleed
+tags:
+  - '@page'
+  - CSS
+  - CSS ページ化メディア
+  - CSS 記述子
+  - Experimental
+  - Reference
+  - bleed
+  - ウェブ
+translation_of: Web/CSS/@page/bleed
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>bleed</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>記述子は、 {{cssxref("@page")}} @-規則で使用し、ページボックスの外にあるページの裁ち落とし領域の大きさを指定します。このプロパティは、 {{cssxref("@page/marks", "marks")}} プロパティを使用して裁ち落とし記号を有効にしている場合のみ効果があります。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css">/* キーワード値 */
+bleed: auto;
+
+/* &lt;length&gt; 値 */
+bleed: 8pt;
+bleed: 1cm;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>{{cssxref("@page/marks", "marks")}} が <code>crop</code> の場合、 <code>6pt</code> に計算します。それ以外の場合はゼロに計算します。</dd>
+ <dt><code>{{cssxref("&lt;length&gt;")}}</code></dt>
+ <dd>ページボックスの外に裁ち落とし領域を、各方向に、どれだけ広げるかを指定します。値は負の数にすることができますが、実装に依存する制限があるかもしれません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">@page {
+  bleed: 1cm;
+}
+</pre>
+
+<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", "#bleed", "bleed")}}</td>
+   <td>{{Spec2("CSS3 Paged Media")}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.page.bleed")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("@page/marks", "marks")}}</li>
+ <li>{{Cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/ja/web/css/@page/index.html b/files/ja/web/css/@page/index.html
new file mode 100644
index 0000000000..a03ac2dff6
--- /dev/null
+++ b/files/ja/web/css/@page/index.html
@@ -0,0 +1,110 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+tags:
+  - '@page'
+  - At-rule
+  - CSS
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>@page</code></strong> は CSS のアット規則で、文書を印刷するときに一部の CSS プロパティを変更するために使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}</pre>
+
+<h3 id="Descriptors" name="Descriptors">記述子</h3>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/@page/size"><code>size</code></a></dt>
+ <dd>対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
+ <dd>クロップや登録マークを文書に追加します。</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
+ <dd>ページのレンダリングがクリップされた場合の、ページボックス間の距離を示します。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p><code>@page</code> ですべての CSS プロパティを変更できるわけではありません。変更できるのは、 margin, orphans, widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。</p>
+
+<p><code>@page</code> アット規則は、 CSS オブジェクトモデルインターフェイス {{domxref("CSSPageRule")}} からアクセスできます。</p>
+
+<div class="note"><strong>注:</strong> W3C は、ビューポートに関する {{cssxref("&lt;length&gt;")}} の単位、 <code>vh</code>, <code>vw</code>, <code>vmin</code>, <code>vmax</code> の取り扱い方について議論中です。差し当たっては、これらを <code>@page</code> アット規則の中で使わないでください。</div>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="page_pseudo-class_examples" name="page_pseudo-class_examples">@page 擬似クラスの例</h3>
+
+<p><code>@page</code> の さまざまな<a href="/ja/docs/Web/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('CSS Logical Properties', '#page', ':recto and :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td><code>:recto</code> 及び <code>:verso</code> ページセレクターを追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>{{SpecName('CSS2.1')}} から変更はないが、 <code>@page</code> 内でより多くの＠規則が利用できるようになった。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.page")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>この件 (ページベースのカウンターなど) に関する進捗の追跡は、 Bugzilla のチケット <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> をご覧ください。</li>
+</ul>
diff --git a/files/ja/web/css/@page/marks/index.html b/files/ja/web/css/@page/marks/index.html
new file mode 100644
index 0000000000..eaced148e4
--- /dev/null
+++ b/files/ja/web/css/@page/marks/index.html
@@ -0,0 +1,86 @@
+---
+title: marks
+slug: Web/CSS/@page/marks
+tags:
+  - '@page'
+  - CSS
+  - CSS ページ化メディア
+  - CSS 記述子
+  - Experimental
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/@page/marks
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>marks</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>記述子は、 {{cssxref("@page")}} @-規則で使用し、文書の表現に対して裁ち落とし記号や十字記号を追加します。<em>裁ち落とし記号</em>はページを切断するべき場所を示します。<em>十字記号</em>はシートの配置のために使用します。</p>
+
+<p>裁ち落とし記号や十字記号はページボックスの外側に印刷されます。裁ち落とし記号や十字記号を表示する余地を確保するため、最終的なページはページボックスよりいくらか大きくする必要があります。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css">/* キーワード値 */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>crop</code></dt>
+ <dd>裁ち落とし記号を表示します。</dd>
+ <dt><code>cross</code></dt>
+ <dd>十字記号を表示します。</dd>
+ <dt><code>none</code></dt>
+ <dd>記号を表示しません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">@page {
+  marks: crop cross;
+}
+</pre>
+
+<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', '#marks', 'marks')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>この CSS プロパティは当初は CSS Level 2 で提案されましたが、 CSS Level 2 (Revision 1) で落とされました。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.page.marks")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{Cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/ja/web/css/@page/size/index.html b/files/ja/web/css/@page/size/index.html
new file mode 100644
index 0000000000..5193209c53
--- /dev/null
+++ b/files/ja/web/css/@page/size/index.html
@@ -0,0 +1,139 @@
+---
+title: size
+slug: Web/CSS/@page/size
+tags:
+  - '@page'
+  - At-rule descriptor
+  - CSS
+  - CSS Descriptor
+  - Experimental
+  - NeedsBrowserCompatibility
+  - Reference
+  - Web
+translation_of: Web/CSS/@page/size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>size</code></strong> <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>記述子は、 {{cssxref("@page")}} アット規則で使用し、ページを表現するために使用するボックスの寸法と向きを定義します。多くの場合、この寸法は印刷ページの適用可能な対象の寸法に対応します。</p>
+
+<p>寸法は「拡縮可能な」キーワード (この場合、ページの有効な大きさ全体を使用します) 又は絶対的な長さのどちらかで定義します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* 拡縮可能な寸法のキーワード値 */
+size: auto;
+size: portrait;
+size: landscape;
+
+/* &lt;length&gt; 値 */
+/* 1 値: 高さ = 幅 */
+size: 6in;
+
+/* 2 値: 幅の後に高さ*/
+size: 4in 6in;
+
+/* 絶対寸法のキーワード値 */
+size: A4;
+size: B5;
+size: JIS-B4;
+size: letter;
+
+/* 寸法と方向の混合 */
+size: A4 portrait;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>ユーザーエージェントがページの寸法を決定します。多くの場合、対象となる用紙の寸法と向きが使用されます。</dd>
+ <dt><code>landscape</code></dt>
+ <dd>ページのコンテンツは横向きモード (ボックスの長辺が水平) で表示されます。</dd>
+ <dt><code>portrait</code></dt>
+ <dd>ページのコンテンツは縦向きモード (ボックスの長辺が垂直) で表示されます。これが既定の向きです。</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>何らかの長さの値 ({{cssxref("&lt;length&gt;")}} を参照)。最初の値はページボックスの幅に対応し、二番目の値は高さに対応します。一つしか値が提供されない場合は、幅と高さの両方に使用されます。</dd>
+ <dt><code>&lt;page-size&gt;</code></dt>
+ <dd>
+ <dl>
+  <dt>A5</dt>
+  <dd>これは標準の ISO の寸法 148mm x 210mm に一致します。</dd>
+  <dt>A4</dt>
+  <dd>これは標準の ISO の寸法 210mm x 297mm に一致します。 (個人の印刷では最もよく使われる寸法です。)</dd>
+  <dt>A3</dt>
+  <dd>これは標準の ISO の寸法 297mm x 420mm に一致します。</dd>
+  <dt>B5</dt>
+  <dd>これは標準の ISO の寸法 176mm x 250mm に一致します。</dd>
+  <dt>B4</dt>
+  <dd>これは標準の ISO の寸法 250mm x 353mm に一致します。</dd>
+  <dt>JIS-B5</dt>
+  <dd>これは JIS 標準の寸法 182mm x 257mm に対応します。</dd>
+  <dt>JIS-B4</dt>
+  <dd>これは JIS 標準の寸法 257mm x 364mm に対応します。</dd>
+  <dt>letter</dt>
+  <dd>このキーワードは北米のレター用紙の寸法、すなわち 8.5in x 11in と同等です。</dd>
+  <dt>legal</dt>
+  <dd>このキーワードは北米のリーガル用紙の寸法、すなわち 8.5in x 14in と同等です。</dd>
+  <dt>ledger</dt>
+  <dd>このキーワードは北米の ledger 用紙の寸法、すなわち 11in x 17in と同等です。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="寸法と向きの指定">寸法と向きの指定</h3>
+
+<pre class="brush: css notranslate">@page {
+  size: 4in 6in landscape;
+}
+</pre>
+
+<h3 id="media_規則内部の入れ子">@media 規則内部の入れ子</h3>
+
+<pre class="brush: css notranslate">@media print {
+  @page {
+    size: 50mm 150mm;
+  }
+}
+</pre>
+
+<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', '#page-size-prop', 'size')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.page.size")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{cssxref("@page/marks", "marks")}}</li>
+</ul>