From 344de481418c0d5a62339748f8d7fc36a8133d47 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO 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 (limited to 'files/ja/web') 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 ---- -
{{CSSRef}}
- -

@page は CSS のアット規則で、文書を印刷するときに一部の CSS プロパティを変更するために使用します。

- -

構文

- -
@page {
-  margin: 1cm;
-}
-
-@page :first {
-  margin: 2cm;
-}
- -

記述子

- -
-
size
-
対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。
-
- -
-
marks
-
クロップや登録マークを文書に追加します。
-
- -
-
bleed
-
ページのレンダリングがクリップされた場合の、ページボックス間の距離を示します。
-
- -

解説

- -

@page ですべての CSS プロパティを変更できるわけではありません。変更できるのは、 margin, orphans, widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。

- -

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

- -
注: W3C は、ビューポートに関する {{cssxref("<length>")}} の単位、 vh, vw, vmin, vmax の取り扱い方について議論中です。差し当たっては、これらを @page アット規則の中で使わないでください。
- -

形式文法

- -{{csssyntax}} - -

例

- -

@page 擬似クラスの例

- -

@page の さまざまな擬似クラスのページにある例を参照してください。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Logical Properties', '#page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}:recto 及び :verso ページセレクターを追加
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}{{SpecName('CSS2.1')}} から変更はないが、 @page 内でより多くの＠規則が利用できるようになった。
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.at-rules.page")}}

- -

関連情報

- - 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 +--- +
{{CSSRef}}
+ +

@page は CSS のアット規則で、文書を印刷するときに一部の CSS プロパティを変更するために使用します。

+ +

構文

+ +
@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}
+ +

記述子

+ +
+
size
+
対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。
+
+ +
+
marks
+
クロップや登録マークを文書に追加します。
+
+ +
+
bleed
+
ページのレンダリングがクリップされた場合の、ページボックス間の距離を示します。
+
+ +

解説

+ +

@page ですべての CSS プロパティを変更できるわけではありません。変更できるのは、 margin, orphans, widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。

+ +

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

+ +
注: W3C は、ビューポートに関する {{cssxref("<length>")}} の単位、 vh, vw, vmin, vmax の取り扱い方について議論中です。差し当たっては、これらを @page アット規則の中で使わないでください。
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

@page 擬似クラスの例

+ +

@page の さまざまな擬似クラスのページにある例を参照してください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}:recto 及び :verso ページセレクターを追加
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}{{SpecName('CSS2.1')}} から変更はないが、 @page 内でより多くの＠規則が利用できるようになった。
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.at-rules.page")}}

+ +

関連情報

+ + 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' ---- -

{{CSSRef}}{{SeeCompatTable}}

- -
-

注: :blank セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。

- -

CSSWG issue #1967 を参照してください。

-
- -

:blank は CSS の擬似クラスで、空のユーザー入力要素 (例えば {{HTMLElement("input")}} や {{HTMLElement("textarea")}}) に一致します。

- -

構文

- -{{CSSSyntax}} - -

例

- -

単純な :blank の例

- -

最終的に対応しているブラウザーでは、 :blank 疑似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。

- -

HTML

- -
<textarea></textarea>
- -

CSS

- -
textarea:blank {
-  border: 3px solid red;
-}
- -

結果

- -

{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}{{Spec2("CSS4 Selectors")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.blank")}}

- -

関連情報

- - 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' +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +
+

注: :blank セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。

+ +

CSSWG issue #1967 を参照してください。

+
+ +

:blank は CSS の擬似クラスで、空のユーザー入力要素 (例えば {{HTMLElement("input")}} や {{HTMLElement("textarea")}}) に一致します。

+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

単純な :blank の例

+ +

最終的に対応しているブラウザーでは、 :blank 疑似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。

+ +

HTML

+ +
<textarea></textarea>
+ +

CSS

+ +
textarea:blank {
+  border: 3px solid red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.blank")}}

+ +

関連情報

+ + 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' ---- -
{{CSSRef}}
- -

:first は CSS の擬似クラスで {{cssxref("@page")}} アット規則で使用され、印刷文書の最初のページを表します。 (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。)

- -
/* 印刷時に最初のページを選択 */
-@page :first {
-  margin-left: 50%;
-  margin-top: 50%;
-}
- -
-

メモ: この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、 {{cssxref("widows")}}、 ページ区切りのみです。さらに、マージンを定義するときには絶対的な長さの単位のみしか使用できません。他のすべてのプロパティは無視されます。

-
- -

構文

- -{{csssyntax}} - -

例

- -

HTML

- -
<p>最初のページです。</p>
-<p>2枚目のページです。</p>
-<button>印刷</button>
-
- -

CSS

- -
@page :first {
-  margin-left: 50%;
-  margin-top: 50%;
-}
-
-p {
-  page-break-after: always;
-}
-
- -

JavaScript

- -
document.querySelector("button").addEventListener('click', () => {
-  window.print();
-});
-
- -

結果

- -

［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。

- -

{{ EmbedLiveSample('Examples', '80%', '150px') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}変更なし。
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}初回定義。
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.first")}}

- -

関連情報

- - 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' +--- +
{{CSSRef}}
+ +

:first は CSS の擬似クラスで {{cssxref("@page")}} アット規則で使用され、印刷文書の最初のページを表します。 (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。)

+ +
/* 印刷時に最初のページを選択 */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+ +
+

メモ: この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、 {{cssxref("widows")}}、 ページ区切りのみです。さらに、マージンを定義するときには絶対的な長さの単位のみしか使用できません。他のすべてのプロパティは無視されます。

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p>最初のページです。</p>
+<p>2枚目のページです。</p>
+<button>印刷</button>
+
+ +

CSS

+ +
@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+
+ +

JavaScript

+ +
document.querySelector("button").addEventListener('click', () => {
+  window.print();
+});
+
+ +

結果

+ +

［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。

+ +

{{ EmbedLiveSample('Examples', '80%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}変更なし。
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}初回定義。
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.first")}}

+ +

関連情報

+ + 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' ---- -
{{ CSSRef() }}
- -

CSS の :left 疑似クラスは {{cssxref("@page")}} @-規則 で使われ、印刷文書の左側のページすべてを表します。

- -
/* 印刷時に左側のページを選択 */
-@page :left {
-  margin: 2in 3in;
-}
- -

そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば :left ページになります。

- -
-

メモ: この疑似クラスは、ページボックスの {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。

-
- -

構文

- -{{csssyntax}} - -

例

- -
@page :left {
-  margin: 2in 3in;
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}{{ Spec2('CSS3 Paged Media') }}変更なし。
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}{{ Spec2('CSS2.1') }}初回定義。
- -

ブラウザーの対応

- -

{{Compat("css.selectors.left")}}

- -

関連情報

- - 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' +--- +
{{ CSSRef() }}
+ +

CSS の :left 疑似クラスは {{cssxref("@page")}} @-規則 で使われ、印刷文書の左側のページすべてを表します。

+ +
/* 印刷時に左側のページを選択 */
+@page :left {
+  margin: 2in 3in;
+}
+ +

そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば :left ページになります。

+ +
+

メモ: この疑似クラスは、ページボックスの {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +
@page :left {
+  margin: 2in 3in;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}{{ Spec2('CSS3 Paged Media') }}変更なし。
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}{{ Spec2('CSS2.1') }}初回定義。
+ +

ブラウザーの対応

+ +

{{Compat("css.selectors.left")}}

+ +

関連情報

+ + 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' ---- -
{{ CSSRef() }}
- -

CSS の :left 疑似クラスは {{cssxref("@page")}} @-規則 で使われ、印刷文書の右側のページすべてを表します。

- -
/* 印刷時に右側のページを選択 */
-@page :right {
-  margin: 2in 3in;
-}
- -

そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば :right ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。

- -
-

メモ: この疑似クラスは、ページボックスの {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。

-
- -

構文

- -{{csssyntax}} - -

例

- -
@page :right {
-  margin: 2in 3in;
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}{{ Spec2('CSS3 Paged Media') }}変更なし。
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}{{ Spec2('CSS2.1') }}初回定義。
- -

ブラウザーの対応

- -

{{Compat("css.selectors.right")}}

- -

関連情報

- - 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' +--- +
{{ CSSRef() }}
+ +

CSS の :left 疑似クラスは {{cssxref("@page")}} @-規則 で使われ、印刷文書の右側のページすべてを表します。

+ +
/* 印刷時に右側のページを選択 */
+@page :right {
+  margin: 2in 3in;
+}
+ +

そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば :right ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。

+ +
+

メモ: この疑似クラスは、ページボックスの {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +
@page :right {
+  margin: 2in 3in;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}{{ Spec2('CSS3 Paged Media') }}変更なし。
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}{{ Spec2('CSS2.1') }}初回定義。
+ +

ブラウザーの対応

+ +

{{Compat("css.selectors.right")}}

+ +

関連情報

+ + 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 ---- -
{{CSSRef}}
- -
このプロパティは {{cssxref("break-after")}} プロパティによって置き換えられました。
- -

page-break-after CSS プロパティは、現在の要素の後で改ページが行われるように調整します。

- -
/* キーワード値 */
-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;
-
- -

このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。

- -

{{cssinfo}}

- -

改ページの別名

- -

page-break-after プロパティは古いプロパティとなり、 {{cssxref("break-after")}} によって置き換えられました。

- -

互換性のため、 page-break-after はブラウザーから break-after の別名として扱われます。これにより、 page-break-after を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
page-break-afterbreak-after
autoauto
leftleft
rightright
avoidavoid
alwayspage
- -

構文

- -

値

- -
-
auto
-
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
-
always
-
要素の後で必ず改ページが行われるように強制します。
-
avoid
-
要素の後で改ページされないようにします。
-
left
-
要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。
-
right
-
要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。
-
recto {{experimental_inline}}
-
左から右に読むページにおいて right と同じ動作をします。右から左に読むページであれば left と同じ働きをします。
-
verso {{experimental_inline}}
-
左から右に読むページにおいて left と同じ動作をします。右から左に読むページであれば right と同じ働きをします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
/* footnotes の後で新しいページに移ります */
-div.footnotes {
-  page-break-after: always;
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}{{Spec2('CSS Logical Properties')}}recto と verso の追加
{{SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after')}}{{Spec2('CSS3 Paged Media')}}プロパティが適用される要素を table rows と table row groups に拡張
{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.page-break-after")}}

- -

関連情報

- - 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 +--- +
{{CSSRef}}
+ +
このプロパティは {{cssxref("break-after")}} プロパティによって置き換えられました。
+ +

page-break-after CSS プロパティは、現在の要素の後で改ページが行われるように調整します。

+ +
/* キーワード値 */
+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;
+
+ +

このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。

+ +

{{cssinfo}}

+ +

改ページの別名

+ +

page-break-after プロパティは古いプロパティとなり、 {{cssxref("break-after")}} によって置き換えられました。

+ +

互換性のため、 page-break-after はブラウザーから break-after の別名として扱われます。これにより、 page-break-after を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
page-break-afterbreak-after
autoauto
leftleft
rightright
avoidavoid
alwayspage
+ +

構文

+ +

値

+ +
+
auto
+
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
+
always
+
要素の後で必ず改ページが行われるように強制します。
+
avoid
+
要素の後で改ページされないようにします。
+
left
+
要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。
+
right
+
要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。
+
recto {{experimental_inline}}
+
左から右に読むページにおいて right と同じ動作をします。右から左に読むページであれば left と同じ働きをします。
+
verso {{experimental_inline}}
+
左から右に読むページにおいて left と同じ動作をします。右から左に読むページであれば right と同じ働きをします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
/* footnotes の後で新しいページに移ります */
+div.footnotes {
+  page-break-after: always;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}{{Spec2('CSS Logical Properties')}}recto と verso の追加
{{SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after')}}{{Spec2('CSS3 Paged Media')}}プロパティが適用される要素を table rows と table row groups に拡張
{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.properties.page-break-after")}}

+ +

関連情報

+ + 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 ---- -
{{CSSRef}}
- -
このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。
- -

page-break-before CSS プロパティは、現在の要素の前で改ページが行われるように調整します。

- -

このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。

- -
/* キーワード値 */
-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;
-
- -

{{cssinfo}}

- -

改ページの別名

- -

page-break-before プロパティは古いプロパティとなり、 {{cssxref("break-before")}} によって置き換えられました。

- -

互換性のため、 page-break-before はブラウザーから break-before の別名として扱われます。これにより、 page-break-before を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
page-break-beforebreak-before
autoauto
leftleft
rightright
avoidavoid
alwayspage
- -

構文

- -

値

- -
-
auto
-
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
-
always
-
要素の前で必ず改ページが行われるように強制します。
-
avoid
-
要素の前で改ページされないようにします。
-
left
-
要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。
-
right
-
要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。
-
recto {{experimental_inline}}
-
左から右に読むページにおいて right と同じ動作をします。右から左に読むページであれば left と同じ働きをします。
-
verso {{experimental_inline}}
-
左から右に読むページにおいて left と同じ動作をします。右から左に読むページであれば right と同じ働きをします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
/* div の前で改ページされないようにします */
-div.note {
-    page-break-before: avoid;
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}{{Spec2('CSS Logical Properties')}}recto と verso の追加
{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}{{Spec2('CSS3 Paged Media')}}プロパティが適用される要素を table rows と table row groups に拡張
{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.page-break-before")}}

- -

関連情報

- - 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 +--- +
{{CSSRef}}
+ +
このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。
+ +

page-break-before CSS プロパティは、現在の要素の前で改ページが行われるように調整します。

+ +

このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。

+ +
/* キーワード値 */
+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;
+
+ +

{{cssinfo}}

+ +

改ページの別名

+ +

page-break-before プロパティは古いプロパティとなり、 {{cssxref("break-before")}} によって置き換えられました。

+ +

互換性のため、 page-break-before はブラウザーから break-before の別名として扱われます。これにより、 page-break-before を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
page-break-beforebreak-before
autoauto
leftleft
rightright
avoidavoid
alwayspage
+ +

構文

+ +

値

+ +
+
auto
+
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
+
always
+
要素の前で必ず改ページが行われるように強制します。
+
avoid
+
要素の前で改ページされないようにします。
+
left
+
要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。
+
right
+
要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。
+
recto {{experimental_inline}}
+
左から右に読むページにおいて right と同じ動作をします。右から左に読むページであれば left と同じ働きをします。
+
verso {{experimental_inline}}
+
左から右に読むページにおいて left と同じ動作をします。右から左に読むページであれば right と同じ働きをします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
/* div の前で改ページされないようにします */
+div.note {
+    page-break-before: avoid;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}{{Spec2('CSS Logical Properties')}}recto と verso の追加
{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}{{Spec2('CSS3 Paged Media')}}プロパティが適用される要素を table rows と table row groups に拡張
{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.properties.page-break-before")}}

+ +

関連情報

+ + 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 ---- -
{{CSSRef}}
- -
このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。
- -

CSS の page-break-inside プロパティは、現在の要素の内側の 改ページを調整します。

- -
/* キーワード値 */
-page-break-inside: auto;
-page-break-inside: avoid;
-
-/* グローバル値 */
-page-break-inside: inherit;
-page-break-inside: initial;
-page-break-inside: unset;
-
- -

{{cssinfo}}

- -

改ページの別名

- -

page-break-inside プロパティは古いプロパティとなり、 {{cssxref("break-inside")}} によって置き換えられました。

- -

互換性のため、 page-break-inside はブラウザーから break-inside の別名として扱われます。これにより、 page-break-inside を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

- - - - - - - - - - - - - - - - - - -
page-break-insidebreak-inside
autoauto
avoidavoid
- -

構文

- -

値

- -
-
auto
-
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
-
avoid
-
要素の内側で改ページされないようにします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

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>
- -

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;
-}
- -

結果

- -

{{EmbedLiveSample("Example", 400, 160)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}{{Spec2('CSS3 Paged Media')}}より多くの要素に適用できるように拡張
{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.page-break-inside")}}

- -

関連情報

- - 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 +--- +
{{CSSRef}}
+ +
このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。
+ +

CSS の page-break-inside プロパティは、現在の要素の内側の 改ページを調整します。

+ +
/* キーワード値 */
+page-break-inside: auto;
+page-break-inside: avoid;
+
+/* グローバル値 */
+page-break-inside: inherit;
+page-break-inside: initial;
+page-break-inside: unset;
+
+ +

{{cssinfo}}

+ +

改ページの別名

+ +

page-break-inside プロパティは古いプロパティとなり、 {{cssxref("break-inside")}} によって置き換えられました。

+ +

互換性のため、 page-break-inside はブラウザーから break-inside の別名として扱われます。これにより、 page-break-inside を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

+ + + + + + + + + + + + + + + + + + +
page-break-insidebreak-inside
autoauto
avoidavoid
+ +

構文

+ +

値

+ +
+
auto
+
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
+
avoid
+
要素の内側で改ページされないようにします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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>
+ +

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;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", 400, 160)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}{{Spec2('CSS3 Paged Media')}}より多くの要素に適用できるように拡張
{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.properties.page-break-inside")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf