From 344de481418c0d5a62339748f8d7fc36a8133d47 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO <mfujimot@gmail.com> Date: Tue, 12 Oct 2021 11:26:07 +0900 Subject: CSS ページメディアの各プロパティの更新準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@page/index.html | 108 ------------------ files/ja/web/css/@page/index.md | 108 ++++++++++++++++++ files/ja/web/css/_colon_blank/index.html | 76 ------------- files/ja/web/css/_colon_blank/index.md | 76 +++++++++++++ files/ja/web/css/_colon_first/index.html | 100 ---------------- files/ja/web/css/_colon_first/index.md | 100 ++++++++++++++++ files/ja/web/css/_colon_left/index.html | 75 ------------ files/ja/web/css/_colon_left/index.md | 75 ++++++++++++ files/ja/web/css/_colon_right/index.html | 75 ------------ files/ja/web/css/_colon_right/index.md | 75 ++++++++++++ files/ja/web/css/page-break-after/index.html | 145 ----------------------- files/ja/web/css/page-break-after/index.md | 145 +++++++++++++++++++++++ files/ja/web/css/page-break-before/index.html | 146 ------------------------ files/ja/web/css/page-break-before/index.md | 146 ++++++++++++++++++++++++ files/ja/web/css/page-break-inside/index.html | 158 -------------------------- files/ja/web/css/page-break-inside/index.md | 158 ++++++++++++++++++++++++++ 16 files changed, 883 insertions(+), 883 deletions(-) delete mode 100644 files/ja/web/css/@page/index.html create mode 100644 files/ja/web/css/@page/index.md delete mode 100644 files/ja/web/css/_colon_blank/index.html create mode 100644 files/ja/web/css/_colon_blank/index.md delete mode 100644 files/ja/web/css/_colon_first/index.html create mode 100644 files/ja/web/css/_colon_first/index.md delete mode 100644 files/ja/web/css/_colon_left/index.html create mode 100644 files/ja/web/css/_colon_left/index.md delete mode 100644 files/ja/web/css/_colon_right/index.html create mode 100644 files/ja/web/css/_colon_right/index.md delete mode 100644 files/ja/web/css/page-break-after/index.html create mode 100644 files/ja/web/css/page-break-after/index.md delete mode 100644 files/ja/web/css/page-break-before/index.html create mode 100644 files/ja/web/css/page-break-before/index.md delete mode 100644 files/ja/web/css/page-break-inside/index.html create mode 100644 files/ja/web/css/page-break-inside/index.md diff --git a/files/ja/web/css/@page/index.html b/files/ja/web/css/@page/index.html deleted file mode 100644 index dd260bbb99..0000000000 --- a/files/ja/web/css/@page/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -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("<length>")}} の単位、 <code>vh</code>, <code>vw</code>, <code>vmin</code>, <code>vmax</code> の取り扱い方について議論中です。差し当たっては、これらを <code>@page</code> アット規則の中で使わないでください。</div> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<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> - -<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/index.md b/files/ja/web/css/@page/index.md new file mode 100644 index 0000000000..dd260bbb99 --- /dev/null +++ b/files/ja/web/css/@page/index.md @@ -0,0 +1,108 @@ +--- +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("<length>")}} の単位、 <code>vh</code>, <code>vw</code>, <code>vmin</code>, <code>vmax</code> の取り扱い方について議論中です。差し当たっては、これらを <code>@page</code> アット規則の中で使わないでください。</div> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +{{csssyntax}} + +<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> + +<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/_colon_blank/index.html b/files/ja/web/css/_colon_blank/index.html deleted file mode 100644 index be50e8b238..0000000000 --- a/files/ja/web/css/_colon_blank/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: ':blank' -slug: 'Web/CSS/:blank' -tags: - - ':blank' - - CSS - - CSS Selectors - - Draft - - Experimental - - NeedsContent - - NeedsExample - - Pseudo-class -translation_of: 'Web/CSS/:blank' ---- -<p>{{CSSRef}}{{SeeCompatTable}}</p> - -<div class="blockIndicator note"> -<p><strong>注:</strong> <code>:blank</code> セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。</p> - -<p><a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">CSSWG issue #1967</a> を参照してください。</p> -</div> - -<p><strong><code>:blank</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、空のユーザー入力要素 (例えば {{HTMLElement("input")}} や {{HTMLElement("textarea")}}) に一致します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -{{CSSSyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="Simple_blank_example" name="Simple_blank_example">単純な :blank の例</h3> - -<p>最終的に対応しているブラウザーでは、 <code>:blank</code> 疑似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><textarea></textarea></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">textarea:blank { - border: 3px solid red; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}</p> - -<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("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.selectors.blank")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{CSSxRef(":empty")}}</li> -</ul> diff --git a/files/ja/web/css/_colon_blank/index.md b/files/ja/web/css/_colon_blank/index.md new file mode 100644 index 0000000000..be50e8b238 --- /dev/null +++ b/files/ja/web/css/_colon_blank/index.md @@ -0,0 +1,76 @@ +--- +title: ':blank' +slug: 'Web/CSS/:blank' +tags: + - ':blank' + - CSS + - CSS Selectors + - Draft + - Experimental + - NeedsContent + - NeedsExample + - Pseudo-class +translation_of: 'Web/CSS/:blank' +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code>:blank</code> セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。</p> + +<p><a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">CSSWG issue #1967</a> を参照してください。</p> +</div> + +<p><strong><code>:blank</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、空のユーザー入力要素 (例えば {{HTMLElement("input")}} や {{HTMLElement("textarea")}}) に一致します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +{{CSSSyntax}} + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Simple_blank_example" name="Simple_blank_example">単純な :blank の例</h3> + +<p>最終的に対応しているブラウザーでは、 <code>:blank</code> 疑似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><textarea></textarea></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">textarea:blank { + border: 3px solid red; +}</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}</p> + +<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("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("css.selectors.blank")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{CSSxRef(":empty")}}</li> +</ul> diff --git a/files/ja/web/css/_colon_first/index.html b/files/ja/web/css/_colon_first/index.html deleted file mode 100644 index fd5162848a..0000000000 --- a/files/ja/web/css/_colon_first/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: ':first' -slug: 'Web/CSS/:first' -tags: - - '@page' - - CSS - - CSS ページ化メディア - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:first' ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>:first</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で使用され、印刷文書の最初のページを表します。</span> (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。)</p> - -<pre class="brush: css no-line-numbers notranslate">/* 印刷時に最初のページを選択 */ -@page :first { - margin-left: 50%; - margin-top: 50%; -}</pre> - -<div class="note"> -<p><strong>メモ:</strong> この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、 {{cssxref("widows")}}、 ページ区切りのみです。さらに、マージンを定義するときには<a href="/ja/docs/Web/CSS/length#Absolute_length_units">絶対的な長さ</a>の単位のみしか使用できません。他のすべてのプロパティは無視されます。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p>最初のページです。</p> -<p>2枚目のページです。</p> -<button>印刷</button> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">@page :first { - margin-left: 50%; - margin-top: 50%; -} - -p { - page-break-after: always; -} -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">document.querySelector("button").addEventListener('click', () => { - window.print(); -}); -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>[印刷]ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。</p> - -<p>{{ EmbedLiveSample('Examples', '80%', '150px') }}</p> - -<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', '#left-right-first', ':first')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.selectors.first")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref("@page")}}</li> - <li>ページに関する他の擬似クラス: {{Cssxref(":left")}}, {{Cssxref(":right")}}</li> -</ul> diff --git a/files/ja/web/css/_colon_first/index.md b/files/ja/web/css/_colon_first/index.md new file mode 100644 index 0000000000..fd5162848a --- /dev/null +++ b/files/ja/web/css/_colon_first/index.md @@ -0,0 +1,100 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - '@page' + - CSS + - CSS ページ化メディア + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:first' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>:first</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で使用され、印刷文書の最初のページを表します。</span> (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。)</p> + +<pre class="brush: css no-line-numbers notranslate">/* 印刷時に最初のページを選択 */ +@page :first { + margin-left: 50%; + margin-top: 50%; +}</pre> + +<div class="note"> +<p><strong>メモ:</strong> この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、 {{cssxref("widows")}}、 ページ区切りのみです。さらに、マージンを定義するときには<a href="/ja/docs/Web/CSS/length#Absolute_length_units">絶対的な長さ</a>の単位のみしか使用できません。他のすべてのプロパティは無視されます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +{{csssyntax}} + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>最初のページです。</p> +<p>2枚目のページです。</p> +<button>印刷</button> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">@page :first { + margin-left: 50%; + margin-top: 50%; +} + +p { + page-break-after: always; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">document.querySelector("button").addEventListener('click', () => { + window.print(); +}); +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>[印刷]ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。</p> + +<p>{{ EmbedLiveSample('Examples', '80%', '150px') }}</p> + +<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', '#left-right-first', ':first')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>変更なし。</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("css.selectors.first")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{Cssxref("@page")}}</li> + <li>ページに関する他の擬似クラス: {{Cssxref(":left")}}, {{Cssxref(":right")}}</li> +</ul> diff --git a/files/ja/web/css/_colon_left/index.html b/files/ja/web/css/_colon_left/index.html deleted file mode 100644 index 2ecfb6ece0..0000000000 --- a/files/ja/web/css/_colon_left/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: ':left' -slug: 'Web/CSS/:left' -tags: - - '@page' - - CSS - - CSS ページ化メディア - - Layout - - Pseudo-class - - Reference - - Web - - ウェブ - - 疑似クラス -translation_of: 'Web/CSS/:left' ---- -<div>{{ CSSRef() }}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:left</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> で使われ、印刷文書の左側のページすべてを表します。</p> - -<pre class="brush: css no-line-numbers">/* 印刷時に左側のページを選択 */ -@page :left { - margin: 2in 3in; -}</pre> - -<p>そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば <code>:left</code> ページになります。</p> - -<div class="note"> -<p><strong>メモ:</strong> この疑似クラスは、<em>ページボックス</em>の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">@page :left { - margin: 2in 3in; -} -</pre> - -<h2 id="Specifications" name="Specifications"><span>仕様書</span></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', '#left-right-first', ':left') }}</td> - <td>{{ Spec2('CSS3 Paged Media') }}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.selectors.left")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{ Cssxref("@page") }}</li> - <li>ページに関する他の疑似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}</li> -</ul> diff --git a/files/ja/web/css/_colon_left/index.md b/files/ja/web/css/_colon_left/index.md new file mode 100644 index 0000000000..2ecfb6ece0 --- /dev/null +++ b/files/ja/web/css/_colon_left/index.md @@ -0,0 +1,75 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - '@page' + - CSS + - CSS ページ化メディア + - Layout + - Pseudo-class + - Reference + - Web + - ウェブ + - 疑似クラス +translation_of: 'Web/CSS/:left' +--- +<div>{{ CSSRef() }}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:left</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> で使われ、印刷文書の左側のページすべてを表します。</p> + +<pre class="brush: css no-line-numbers">/* 印刷時に左側のページを選択 */ +@page :left { + margin: 2in 3in; +}</pre> + +<p>そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば <code>:left</code> ページになります。</p> + +<div class="note"> +<p><strong>メモ:</strong> この疑似クラスは、<em>ページボックス</em>の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +{{csssyntax}} + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: css">@page :left { + margin: 2in 3in; +} +</pre> + +<h2 id="Specifications" name="Specifications"><span>仕様書</span></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', '#left-right-first', ':left') }}</td> + <td>{{ Spec2('CSS3 Paged Media') }}</td> + <td>変更なし。</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>{{Compat("css.selectors.left")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ Cssxref("@page") }}</li> + <li>ページに関する他の疑似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}</li> +</ul> diff --git a/files/ja/web/css/_colon_right/index.html b/files/ja/web/css/_colon_right/index.html deleted file mode 100644 index 04c7711263..0000000000 --- a/files/ja/web/css/_colon_right/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: ':right' -slug: 'Web/CSS/:right' -tags: - - '@page' - - CSS - - CSS ページ化メディア - - Layout - - Pseudo-class - - Reference - - Web - - ウェブ - - 疑似クラス -translation_of: 'Web/CSS/:right' ---- -<div>{{ CSSRef() }}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:left</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> で使われ、印刷文書の右側のページすべてを表します。</p> - -<pre class="brush: css no-line-numbers">/* 印刷時に右側のページを選択 */ -@page :right { - margin: 2in 3in; -}</pre> - -<p>そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば <code>:right</code> ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。</p> - -<div class="note"> -<p><strong>メモ:</strong> この疑似クラスは、<em>ページボックス</em>の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">@page :right { - margin: 2in 3in; -} -</pre> - -<h2 id="Specifications" name="Specifications"><span>仕様書</span></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', '#left-right-first', ':right') }}</td> - <td>{{ Spec2('CSS3 Paged Media') }}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.selectors.right")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{ Cssxref("@page") }}</li> - <li>ページに関する他の疑似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}</li> -</ul> diff --git a/files/ja/web/css/_colon_right/index.md b/files/ja/web/css/_colon_right/index.md new file mode 100644 index 0000000000..04c7711263 --- /dev/null +++ b/files/ja/web/css/_colon_right/index.md @@ -0,0 +1,75 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +tags: + - '@page' + - CSS + - CSS ページ化メディア + - Layout + - Pseudo-class + - Reference + - Web + - ウェブ + - 疑似クラス +translation_of: 'Web/CSS/:right' +--- +<div>{{ CSSRef() }}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:left</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> で使われ、印刷文書の右側のページすべてを表します。</p> + +<pre class="brush: css no-line-numbers">/* 印刷時に右側のページを選択 */ +@page :right { + margin: 2in 3in; +}</pre> + +<p>そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば <code>:right</code> ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。</p> + +<div class="note"> +<p><strong>メモ:</strong> この疑似クラスは、<em>ページボックス</em>の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +{{csssyntax}} + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: css">@page :right { + margin: 2in 3in; +} +</pre> + +<h2 id="Specifications" name="Specifications"><span>仕様書</span></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', '#left-right-first', ':right') }}</td> + <td>{{ Spec2('CSS3 Paged Media') }}</td> + <td>変更なし。</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>{{Compat("css.selectors.right")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ Cssxref("@page") }}</li> + <li>ページに関する他の疑似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}</li> +</ul> diff --git a/files/ja/web/css/page-break-after/index.html b/files/ja/web/css/page-break-after/index.html deleted file mode 100644 index 7661dba34e..0000000000 --- a/files/ja/web/css/page-break-after/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: page-break-after -slug: Web/CSS/page-break-after -tags: - - CSS - - CSS Property - - Page Breaks - - Reference -translation_of: Web/CSS/page-break-after ---- -<div>{{CSSRef}}</div> - -<div class="blockIndicator warning">このプロパティは {{cssxref("break-after")}} プロパティによって置き換えられました。</div> - -<p><strong><code>page-break-after</code></strong> CSS プロパティは、現在の要素の<em>後で</em>改ページが行われるように調整します。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -page-break-after: auto; -page-break-after: always; -page-break-after: avoid; -page-break-after: left; -page-break-after: right; -page-break-after: recto; -page-break-after: verso; - -/* グローバル値 */ -page-break-after: inherit; -page-break-after: initial; -page-break-after: unset; -</pre> - -<p>このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2> - -<p><code>page-break-after</code> プロパティは古いプロパティとなり、 {{cssxref("break-after")}} によって置き換えられました。</p> - -<p>互換性のため、 <code>page-break-after</code> はブラウザーから <code>break-after</code> の別名として扱われます。これにより、 <code>page-break-after</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p> - -<table> - <thead> - <tr> - <th scope="col">page-break-after</th> - <th scope="col">break-after</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>auto</code></td> - <td><code>auto</code></td> - </tr> - <tr> - <td><code>left</code></td> - <td><code>left</code></td> - </tr> - <tr> - <td><code>right</code></td> - <td><code>right</code></td> - </tr> - <tr> - <td><code>avoid</code></td> - <td><code>avoid</code></td> - </tr> - <tr> - <td><code>always</code></td> - <td><code>page</code></td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd> - <dt><code>always</code></dt> - <dd>要素の後で必ず改ページが行われるように強制します。</dd> - <dt><code>avoid</code></dt> - <dd>要素の後で改ページされないようにします。</dd> - <dt><code>left</code></dt> - <dd>要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。</dd> - <dt><code>right</code></dt> - <dd>要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。</dd> - <dt><code>recto</code> {{experimental_inline}}</dt> - <dd>左から右に読むページにおいて <code>right</code> と同じ動作をします。右から左に読むページであれば <code>left</code> と同じ働きをします。</dd> - <dt><code>verso</code> {{experimental_inline}}</dt> - <dd>左から右に読むページにおいて <code>left</code> と同じ動作をします。右から左に読むページであれば <code>right</code> と同じ働きをします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: css">/* footnotes の後で新しいページに移ります */ -div.footnotes { - page-break-after: always; -} -</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('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', '#page-break-after', 'page-break-after')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>プロパティが適用される要素を table rows と table row groups に拡張</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.page-break-after")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li> - <li>{{cssxref("page-break-before")}}, {{cssxref("page-break-inside")}}</li> - <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li> -</ul> diff --git a/files/ja/web/css/page-break-after/index.md b/files/ja/web/css/page-break-after/index.md new file mode 100644 index 0000000000..7661dba34e --- /dev/null +++ b/files/ja/web/css/page-break-after/index.md @@ -0,0 +1,145 @@ +--- +title: page-break-after +slug: Web/CSS/page-break-after +tags: + - CSS + - CSS Property + - Page Breaks + - Reference +translation_of: Web/CSS/page-break-after +--- +<div>{{CSSRef}}</div> + +<div class="blockIndicator warning">このプロパティは {{cssxref("break-after")}} プロパティによって置き換えられました。</div> + +<p><strong><code>page-break-after</code></strong> CSS プロパティは、現在の要素の<em>後で</em>改ページが行われるように調整します。</p> + +<pre class="brush:css no-line-numbers">/* キーワード値 */ +page-break-after: auto; +page-break-after: always; +page-break-after: avoid; +page-break-after: left; +page-break-after: right; +page-break-after: recto; +page-break-after: verso; + +/* グローバル値 */ +page-break-after: inherit; +page-break-after: initial; +page-break-after: unset; +</pre> + +<p>このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。</p> + +<p>{{cssinfo}}</p> + +<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2> + +<p><code>page-break-after</code> プロパティは古いプロパティとなり、 {{cssxref("break-after")}} によって置き換えられました。</p> + +<p>互換性のため、 <code>page-break-after</code> はブラウザーから <code>break-after</code> の別名として扱われます。これにより、 <code>page-break-after</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p> + +<table> + <thead> + <tr> + <th scope="col">page-break-after</th> + <th scope="col">break-after</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>auto</code></td> + <td><code>auto</code></td> + </tr> + <tr> + <td><code>left</code></td> + <td><code>left</code></td> + </tr> + <tr> + <td><code>right</code></td> + <td><code>right</code></td> + </tr> + <tr> + <td><code>avoid</code></td> + <td><code>avoid</code></td> + </tr> + <tr> + <td><code>always</code></td> + <td><code>page</code></td> + </tr> + </tbody> +</table> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd> + <dt><code>always</code></dt> + <dd>要素の後で必ず改ページが行われるように強制します。</dd> + <dt><code>avoid</code></dt> + <dd>要素の後で改ページされないようにします。</dd> + <dt><code>left</code></dt> + <dd>要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。</dd> + <dt><code>right</code></dt> + <dd>要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。</dd> + <dt><code>recto</code> {{experimental_inline}}</dt> + <dd>左から右に読むページにおいて <code>right</code> と同じ動作をします。右から左に読むページであれば <code>left</code> と同じ働きをします。</dd> + <dt><code>verso</code> {{experimental_inline}}</dt> + <dd>左から右に読むページにおいて <code>left</code> と同じ動作をします。右から左に読むページであれば <code>right</code> と同じ働きをします。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +{{csssyntax}} + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: css">/* footnotes の後で新しいページに移ります */ +div.footnotes { + page-break-after: always; +} +</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('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', '#page-break-after', 'page-break-after')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>プロパティが適用される要素を table rows と table row groups に拡張</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>{{Compat("css.properties.page-break-after")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li> + <li>{{cssxref("page-break-before")}}, {{cssxref("page-break-inside")}}</li> + <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li> +</ul> diff --git a/files/ja/web/css/page-break-before/index.html b/files/ja/web/css/page-break-before/index.html deleted file mode 100644 index 50665b213f..0000000000 --- a/files/ja/web/css/page-break-before/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: page-break-before -slug: Web/CSS/page-break-before -tags: - - CSS - - CSS プロパティ - - CSS ページ付きメディア - - Reference - - 改ページ -translation_of: Web/CSS/page-break-before ---- -<div>{{CSSRef}}</div> - -<div class="blockIndicator warning">このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。</div> - -<p><strong><code>page-break-before</code></strong> CSS プロパティは、現在の要素の<em>前で</em>改ページが行われるように調整します。</p> - -<p>このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -page-break-before: auto; -page-break-before: always; -page-break-before: avoid; -page-break-before: left; -page-break-before: right; -page-break-before: recto; -page-break-before: verso; - -/* グローバル値 */ -page-break-before: inherit; -page-break-before: initial; -page-break-before: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2> - -<p><code>page-break-before</code> プロパティは古いプロパティとなり、 {{cssxref("break-before")}} によって置き換えられました。</p> - -<p>互換性のため、 <code>page-break-before</code> はブラウザーから <code>break-before</code> の別名として扱われます。これにより、 <code>page-break-before</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p> - -<table> - <thead> - <tr> - <th scope="col">page-break-before</th> - <th scope="col">break-before</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>auto</code></td> - <td><code>auto</code></td> - </tr> - <tr> - <td><code>left</code></td> - <td><code>left</code></td> - </tr> - <tr> - <td><code>right</code></td> - <td><code>right</code></td> - </tr> - <tr> - <td><code>avoid</code></td> - <td><code>avoid</code></td> - </tr> - <tr> - <td><code>always</code></td> - <td><code>page</code></td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd> - <dt><code>always</code></dt> - <dd>要素の前で必ず改ページが行われるように強制します。</dd> - <dt><code>avoid</code></dt> - <dd>要素の前で改ページされないようにします。</dd> - <dt><code>left</code></dt> - <dd>要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。</dd> - <dt><code>right</code></dt> - <dd>要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。</dd> - <dt><code>recto</code> {{experimental_inline}}</dt> - <dd>左から右に読むページにおいて <code>right</code> と同じ動作をします。右から左に読むページであれば <code>left</code> と同じ働きをします。</dd> - <dt><code>verso</code> {{experimental_inline}}</dt> - <dd>左から右に読むページにおいて <code>left</code> と同じ動作をします。右から左に読むページであれば <code>right</code> と同じ働きをします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: css">/* div の前で改ページされないようにします */ -div.note { - page-break-before: avoid; -} -</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('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', '#page-break-before', 'page-break-before')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>プロパティが適用される要素を table rows と table row groups に拡張</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.page-break-before")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li> - <li>{{cssxref("page-break-after")}}, {{cssxref("page-break-inside")}}</li> - <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li> -</ul> diff --git a/files/ja/web/css/page-break-before/index.md b/files/ja/web/css/page-break-before/index.md new file mode 100644 index 0000000000..50665b213f --- /dev/null +++ b/files/ja/web/css/page-break-before/index.md @@ -0,0 +1,146 @@ +--- +title: page-break-before +slug: Web/CSS/page-break-before +tags: + - CSS + - CSS プロパティ + - CSS ページ付きメディア + - Reference + - 改ページ +translation_of: Web/CSS/page-break-before +--- +<div>{{CSSRef}}</div> + +<div class="blockIndicator warning">このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。</div> + +<p><strong><code>page-break-before</code></strong> CSS プロパティは、現在の要素の<em>前で</em>改ページが行われるように調整します。</p> + +<p>このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。</p> + +<pre class="brush:css no-line-numbers">/* キーワード値 */ +page-break-before: auto; +page-break-before: always; +page-break-before: avoid; +page-break-before: left; +page-break-before: right; +page-break-before: recto; +page-break-before: verso; + +/* グローバル値 */ +page-break-before: inherit; +page-break-before: initial; +page-break-before: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2> + +<p><code>page-break-before</code> プロパティは古いプロパティとなり、 {{cssxref("break-before")}} によって置き換えられました。</p> + +<p>互換性のため、 <code>page-break-before</code> はブラウザーから <code>break-before</code> の別名として扱われます。これにより、 <code>page-break-before</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p> + +<table> + <thead> + <tr> + <th scope="col">page-break-before</th> + <th scope="col">break-before</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>auto</code></td> + <td><code>auto</code></td> + </tr> + <tr> + <td><code>left</code></td> + <td><code>left</code></td> + </tr> + <tr> + <td><code>right</code></td> + <td><code>right</code></td> + </tr> + <tr> + <td><code>avoid</code></td> + <td><code>avoid</code></td> + </tr> + <tr> + <td><code>always</code></td> + <td><code>page</code></td> + </tr> + </tbody> +</table> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd> + <dt><code>always</code></dt> + <dd>要素の前で必ず改ページが行われるように強制します。</dd> + <dt><code>avoid</code></dt> + <dd>要素の前で改ページされないようにします。</dd> + <dt><code>left</code></dt> + <dd>要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。</dd> + <dt><code>right</code></dt> + <dd>要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。</dd> + <dt><code>recto</code> {{experimental_inline}}</dt> + <dd>左から右に読むページにおいて <code>right</code> と同じ動作をします。右から左に読むページであれば <code>left</code> と同じ働きをします。</dd> + <dt><code>verso</code> {{experimental_inline}}</dt> + <dd>左から右に読むページにおいて <code>left</code> と同じ動作をします。右から左に読むページであれば <code>right</code> と同じ働きをします。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +{{csssyntax}} + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: css">/* div の前で改ページされないようにします */ +div.note { + page-break-before: avoid; +} +</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('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', '#page-break-before', 'page-break-before')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>プロパティが適用される要素を table rows と table row groups に拡張</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>{{Compat("css.properties.page-break-before")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li> + <li>{{cssxref("page-break-after")}}, {{cssxref("page-break-inside")}}</li> + <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li> +</ul> diff --git a/files/ja/web/css/page-break-inside/index.html b/files/ja/web/css/page-break-inside/index.html deleted file mode 100644 index 7856f39482..0000000000 --- a/files/ja/web/css/page-break-inside/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: page-break-inside -slug: Web/CSS/page-break-inside -tags: - - CSS - - CSS プロパティ - - CSS ページ付きメディア - - Reference - - 改ページ -translation_of: Web/CSS/page-break-inside ---- -<div>{{CSSRef}}</div> - -<div class="blockIndicator warning">このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。</div> - -<p>CSS の <strong><code>page-break-inside</code></strong> プロパティは、現在の要素の<em>内側の</em> 改ページを調整します。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -page-break-inside: auto; -page-break-inside: avoid; - -/* グローバル値 */ -page-break-inside: inherit; -page-break-inside: initial; -page-break-inside: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2> - -<p><code>page-break-inside</code> プロパティは古いプロパティとなり、 {{cssxref("break-inside")}} によって置き換えられました。</p> - -<p>互換性のため、 <code>page-break-inside</code> はブラウザーから <code>break-inside</code> の別名として扱われます。これにより、 <code>page-break-inside</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p> - -<table> - <thead> - <tr> - <th scope="col">page-break-inside</th> - <th scope="col">break-inside</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>auto</code></td> - <td><code>auto</code></td> - </tr> - <tr> - <td><code>avoid</code></td> - <td><code>avoid</code></td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd> - <dt><code>avoid</code></dt> - <dd>要素の内側で改ページされないようにします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML" name="HTML">HTML</h3> - -<pre class="brush: html"><div class="page"> - <p>これは最初の段落です。</p> - <section class="list"> - <span>リスト</span> - <ol> - <li>順序付き項目1</li> -<!-- <li>順序付き項目2</li> --> - </ol> - </section> - <ul> - <li>順序なし項目1</li> -<!-- <li>順序なし項目2</li> --> - </ul> - <p>これは第二段落です。</p> - <p>これは第三段落です。文章の量が多くなっています。</p> - <p>これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。</p> -</div></pre> - -<h3 id="CSS" name="CSS">CSS</h3> - -<pre class="brush: css">.page { - background-color: #8cffa0; - height: 90px; - width: 200px; - columns: 1; - column-width: 100px; -} - -.list, ol, ul, p { - break-inside: avoid; -} - -p { - background-color: #8ca0ff; -} - -ol, ul, .list { - margin: 0.5em 0; - display: block; - background-color: orange; -} - -p:first-child { - margin-top: 0; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", 400, 160)}}</p> - -<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-break-inside', 'page-break-inside')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>より多くの要素に適用できるように拡張</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.page-break-inside")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li> - <li>{{cssxref("page-break-after")}}, {{cssxref("page-break-before")}}</li> - <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li> -</ul> diff --git a/files/ja/web/css/page-break-inside/index.md b/files/ja/web/css/page-break-inside/index.md new file mode 100644 index 0000000000..7856f39482 --- /dev/null +++ b/files/ja/web/css/page-break-inside/index.md @@ -0,0 +1,158 @@ +--- +title: page-break-inside +slug: Web/CSS/page-break-inside +tags: + - CSS + - CSS プロパティ + - CSS ページ付きメディア + - Reference + - 改ページ +translation_of: Web/CSS/page-break-inside +--- +<div>{{CSSRef}}</div> + +<div class="blockIndicator warning">このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。</div> + +<p>CSS の <strong><code>page-break-inside</code></strong> プロパティは、現在の要素の<em>内側の</em> 改ページを調整します。</p> + +<pre class="brush:css no-line-numbers">/* キーワード値 */ +page-break-inside: auto; +page-break-inside: avoid; + +/* グローバル値 */ +page-break-inside: inherit; +page-break-inside: initial; +page-break-inside: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2> + +<p><code>page-break-inside</code> プロパティは古いプロパティとなり、 {{cssxref("break-inside")}} によって置き換えられました。</p> + +<p>互換性のため、 <code>page-break-inside</code> はブラウザーから <code>break-inside</code> の別名として扱われます。これにより、 <code>page-break-inside</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p> + +<table> + <thead> + <tr> + <th scope="col">page-break-inside</th> + <th scope="col">break-inside</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>auto</code></td> + <td><code>auto</code></td> + </tr> + <tr> + <td><code>avoid</code></td> + <td><code>avoid</code></td> + </tr> + </tbody> +</table> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd> + <dt><code>avoid</code></dt> + <dd>要素の内側で改ページされないようにします。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +{{csssyntax}} + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML" name="HTML">HTML</h3> + +<pre class="brush: html"><div class="page"> + <p>これは最初の段落です。</p> + <section class="list"> + <span>リスト</span> + <ol> + <li>順序付き項目1</li> +<!-- <li>順序付き項目2</li> --> + </ol> + </section> + <ul> + <li>順序なし項目1</li> +<!-- <li>順序なし項目2</li> --> + </ul> + <p>これは第二段落です。</p> + <p>これは第三段落です。文章の量が多くなっています。</p> + <p>これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。</p> +</div></pre> + +<h3 id="CSS" name="CSS">CSS</h3> + +<pre class="brush: css">.page { + background-color: #8cffa0; + height: 90px; + width: 200px; + columns: 1; + column-width: 100px; +} + +.list, ol, ul, p { + break-inside: avoid; +} + +p { + background-color: #8ca0ff; +} + +ol, ul, .list { + margin: 0.5em 0; + display: block; + background-color: orange; +} + +p:first-child { + margin-top: 0; +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example", 400, 160)}}</p> + +<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-break-inside', 'page-break-inside')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>より多くの要素に適用できるように拡張</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>{{Compat("css.properties.page-break-inside")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li> + <li>{{cssxref("page-break-after")}}, {{cssxref("page-break-before")}}</li> + <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li> +</ul> -- cgit v1.2.3-54-g00ecf