From 1f5e5c4de6791f1c512ee310fbc4f240819c7f99 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 12 Oct 2021 11:30:36 +0900 Subject: CSS ページメディアに関する文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/11 時点の英語版に同期 --- files/ja/web/css/@page/index.md | 118 ++++++------------ files/ja/web/css/_colon_blank/index.md | 77 +++++------- files/ja/web/css/_colon_first/index.md | 115 +++++++---------- files/ja/web/css/_colon_left/index.md | 76 +++++------ files/ja/web/css/_colon_right/index.md | 76 +++++------ files/ja/web/css/css_pages/index.md | 82 ++++-------- files/ja/web/css/page-break-after/index.md | 187 +++++++++++----------------- files/ja/web/css/page-break-before/index.md | 184 +++++++++++---------------- files/ja/web/css/page-break-inside/index.md | 181 ++++++++++++--------------- 9 files changed, 419 insertions(+), 677 deletions(-) diff --git a/files/ja/web/css/@page/index.md b/files/ja/web/css/@page/index.md index dd260bbb99..efa6049af7 100644 --- a/files/ja/web/css/@page/index.md +++ b/files/ja/web/css/@page/index.md @@ -5,104 +5,66 @@ tags: - '@page' - At-rule - CSS - - Layout + - レイアウト - Reference - Web +browser-compat: css.at-rules.page translation_of: Web/CSS/@page --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

構文

+## 構文 -
@page {
+```css
+@page {
   margin: 1cm;
 }
 
 @page :first {
   margin: 2cm;
-}
+} +``` -

記述子

+### 記述子 -
-
size
-
対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。
-
+- [`size`](/ja/docs/Web/CSS/@page/size) + - : 対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。 -
-
marks
-
クロップや登録マークを文書に追加します。
-
+## 解説 -
-
bleed
-
ページのレンダリングがクリップされた場合の、ページボックス間の距離を示します。
-
+`@page` ですべての CSS プロパティを変更できるわけではありません。変更できるのは、マージン、orphans、widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。 -

解説

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

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

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

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

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

形式文法

+## 例 -{{csssyntax}} +### @page 擬似クラスの例 + +さまざまな `@page` の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)のページにある例を参照してください。 + +- {{Cssxref(":blank")}} +- {{Cssxref(":first")}} +- {{Cssxref(":left")}} +- {{Cssxref(":right")}} +- {{Cssxref(":recto")}} {{experimental_inline}} +- {{Cssxref(":verso")}} {{experimental_inline}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -

例

- -

@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")}}

- -

関連情報

- - +- この件 (ページベースのカウンターなど) に関する進捗の追跡は、 Bugzilla のチケット [\[META\] CSS Paged Media Module Level 3](https://bugzilla.mozilla.org/show_bug.cgi?id=286443) を参照してください。 diff --git a/files/ja/web/css/_colon_blank/index.md b/files/ja/web/css/_colon_blank/index.md index be50e8b238..758c0b5193 100644 --- a/files/ja/web/css/_colon_blank/index.md +++ b/files/ja/web/css/_colon_blank/index.md @@ -1,76 +1,63 @@ --- title: ':blank' -slug: 'Web/CSS/:blank' +slug: Web/CSS/:blank tags: - ':blank' - CSS - - CSS Selectors + - CSS セレクター - Draft - Experimental - NeedsContent - NeedsExample - - Pseudo-class -translation_of: 'Web/CSS/:blank' + - 擬似クラス + - セレクター +browser-compat: css.selectors.blank +translation_of: Web/CSS/:blank --- -

{{CSSRef}}{{SeeCompatTable}}

+{{CSSRef}}{{SeeCompatTable}} -
-

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

+> **Note:** セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。 +> +> [CSSWG issue #1967](https://github.com/w3c/csswg-drafts/issues/1967) を参照してください。 -

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

-
+**`:blank`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、空のユーザー入力要素 (例えば {{HTMLElement("input")}} や {{HTMLElement("textarea")}}) を選択します。 -

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

- -

構文

+## 構文 {{CSSSyntax}} -

例

+## 例 -

単純な :blank の例

+

単純な :blank の例

-

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

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

HTML

+#### HTML -
<textarea></textarea>
+```html + +``` -

CSS

+#### CSS -
textarea:blank {
+```css
+textarea:blank {
   border: 3px solid red;
-}
+} +``` -

結果

+#### 結果 -

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

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

仕様書

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

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{CSSxRef(":empty")}} diff --git a/files/ja/web/css/_colon_first/index.md b/files/ja/web/css/_colon_first/index.md index fd5162848a..3e320393c3 100644 --- a/files/ja/web/css/_colon_first/index.md +++ b/files/ja/web/css/_colon_first/index.md @@ -1,47 +1,49 @@ --- title: ':first' -slug: 'Web/CSS/:first' +slug: Web/CSS/:first tags: - '@page' - CSS - - CSS ページ化メディア - - Layout - - Pseudo-class + - レイアウト + - 擬似クラス - Reference - - Selector + - セレクター - Web -translation_of: 'Web/CSS/:first' +browser-compat: css.selectors.first +translation_of: Web/CSS/:first --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:first`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、{{cssxref("@page")}} [アットルール](/ja/docs/Web/CSS/At-rule)で使用され、印刷文書の最初のページを表します。 (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。) -
/* 印刷時に最初のページを選択 */
+```css
+/* 印刷時に最初のページを選択 */
 @page :first {
   margin-left: 50%;
   margin-top: 50%;
-}
+} +``` -
-

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

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

構文

+## 構文 {{csssyntax}} -

例

+

例

-

HTML

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

最初のページです。

+

2 枚目のページです。

+ +``` -

CSS

+### CSS -
@page :first {
+```css
+@page :first {
   margin-left: 50%;
   margin-top: 50%;
 }
@@ -49,52 +51,31 @@ translation_of: 'Web/CSS/:first'
 p {
   page-break-after: always;
 }
-
+``` -

JavaScript

+### JavaScript -
document.querySelector("button").addEventListener('click', () => {
+```js
+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")}}

- -

関連情報

- - +``` + +### 結果 + +［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。 + +{{ EmbedLiveSample('Examples', '80%', '150px') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("@page")}} +- ページに関する他の擬似クラス: {{Cssxref(":left")}}, {{Cssxref(":right")}} diff --git a/files/ja/web/css/_colon_left/index.md b/files/ja/web/css/_colon_left/index.md index 2ecfb6ece0..aa09f80d22 100644 --- a/files/ja/web/css/_colon_left/index.md +++ b/files/ja/web/css/_colon_left/index.md @@ -1,75 +1,55 @@ --- title: ':left' -slug: 'Web/CSS/:left' +slug: Web/CSS/:left tags: - '@page' - CSS - - CSS ページ化メディア - - Layout - - Pseudo-class + - レイアウト + - 擬似クラス - Reference + - セレクター - Web - - ウェブ - - 疑似クラス -translation_of: 'Web/CSS/:left' +browser-compat: css.selectors.left +translation_of: Web/CSS/:left --- -
{{ CSSRef() }}
+{{ CSSRef() }} -

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

+**`:left`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、{{cssxref("@page")}} [アットルール](/ja/docs/Web/CSS/At-rule)で使われ、印刷文書の左側のページすべてを表します。 -
/* 印刷時に左側のページを選択 */
+```css
+/* 印刷時に左側のページを選択 */
 @page :left {
   margin: 2in 3in;
-}
+} +``` -

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

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

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

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

構文

+## 構文 {{csssyntax}} -

例

+## 例 + +### 左側のページのマージンを設定 -
@page :left {
+```css
+@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') }}初回定義。
+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{ Cssxref("@page") }} +- ページに関する他の擬似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":right") }} diff --git a/files/ja/web/css/_colon_right/index.md b/files/ja/web/css/_colon_right/index.md index 04c7711263..072500296d 100644 --- a/files/ja/web/css/_colon_right/index.md +++ b/files/ja/web/css/_colon_right/index.md @@ -1,75 +1,55 @@ --- title: ':right' -slug: 'Web/CSS/:right' +slug: Web/CSS/:right tags: - '@page' - CSS - - CSS ページ化メディア - - Layout - - Pseudo-class + - レイアウト + - 擬似クラス - Reference + - セレクター - Web - - ウェブ - - 疑似クラス -translation_of: 'Web/CSS/:right' +browser-compat: css.selectors.right +translation_of: Web/CSS/:right --- -
{{ CSSRef() }}
+{{ CSSRef() }} -

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

+**`:right`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、{{cssxref("@page")}} [アットルール](/ja/docs/Web/CSS/At-rule)で使われ、印刷文書の右側のページすべてを表します。 -
/* 印刷時に右側のページを選択 */
+```css
+/* 印刷時に右側のページを選択 */
 @page :right {
   margin: 2in 3in;
-}
+} +``` -

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

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

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

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

構文

+## 構文 {{csssyntax}} -

例

+## 例 + +### 右側のページにマージンを設定 -
@page :right {
+```css
+@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') }}初回定義。
+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{ Cssxref("@page") }} +- ページに関する他の擬似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":left") }} diff --git a/files/ja/web/css/css_pages/index.md b/files/ja/web/css/css_pages/index.md index 59b983eca7..49cea7c091 100644 --- a/files/ja/web/css/css_pages/index.md +++ b/files/ja/web/css/css_pages/index.md @@ -1,75 +1,41 @@ --- -title: CSS ページ化メディア +title: CSS ページメディア slug: Web/CSS/CSS_Pages tags: - CSS - - CSS ページ付きメディア - - CSS ページ化メディア - - Reference + - CSS ページメディア + - ガイド - 概要 + - Reference translation_of: Web/CSS/CSS_Pages --- -
{{CSSRef}}
+{{CSSRef}} -

CSS ページ化メディア (CSS Paged Media) は、ページ切り替えを扱う方法を定義する CSS のモジュールです。

+**CSS ページメディア**は CSS のモジュールの一つで、ページ切り替えをどのように扱うかを定義します。 -

リファレンス

+## リファレンス -

CSS プロパティ

+### CSS プロパティ -
- -
+- {{cssxref("page-break-after")}} +- {{cssxref("page-break-before")}} +- {{cssxref("page-break-inside")}} -

@-規則

+### アットルール -
- -
+- {{cssxref('@page')}} -

疑似クラス

+### 擬似クラス -
- -
+- {{cssxref(':blank')}} +- {{cssxref(':first')}} +- {{cssxref(':left')}} +- {{cssxref(':right')}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Paged Media')}}{{Spec2('CSS3 Paged Media')}} 
{{SpecName('CSS3 Fragmentation')}}{{Spec2('CSS3 Fragmentation')}} 
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}} 
+| 仕様書 | 状態 | 備考 | +| ---------------------------------- | ------------------------------- | ------- | +| {{SpecName('CSS3 Paged Media')}} | {{Spec2('CSS3 Paged Media')}} | | +| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} | | +| {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | | diff --git a/files/ja/web/css/page-break-after/index.md b/files/ja/web/css/page-break-after/index.md index 7661dba34e..0a55d07ff8 100644 --- a/files/ja/web/css/page-break-after/index.md +++ b/files/ja/web/css/page-break-after/index.md @@ -3,18 +3,21 @@ title: page-break-after slug: Web/CSS/page-break-after tags: - CSS - - CSS Property - - Page Breaks + - CSS プロパティ + - ページ区切り - Reference + - recipe:css-property +browser-compat: css.properties.page-break-after translation_of: Web/CSS/page-break-after --- -
{{CSSRef}}
+{{CSSRef}} -
このプロパティは {{cssxref("break-after")}} プロパティによって置き換えられました。
+> **Warning:** このプロパティは {{cssxref("break-after")}} プロパティで置き換えられました。 -

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

+**`page-break-after`** は CSS のプロパティで、現在の要素の*後で*改ページが行われるように調整します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 page-break-after: auto;
 page-break-after: always;
 page-break-after: avoid;
@@ -26,120 +29,74 @@ page-break-after: verso;
 /* グローバル値 */
 page-break-after: inherit;
 page-break-after: initial;
+page-break-after: revert;
 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 と同じ働きをします。
-
- -

形式文法

+``` + +このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。 + +## 構文 + +### 値 + +- `auto` + - : 初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。 +- `always` + - : 要素の後で必ず改ページが行われるように強制します。 +- `avoid` + - : 要素の後で改ページされないようにします。 +- `left` + - : 要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。 +- `right` + - : 要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。 +- `recto` {{experimental_inline}} + - : 左から右に進むページにおいて `right` と同じ動作をします。右から左に進むページであれば `left` と同じ働きをします。 +- `verso` {{experimental_inline}} + - : 左から右に進むページにおいて `left` と同じ動作をします。右から左に進むページであれば `right` と同じ働きをします。 + +## 改ページの別名 + +`page-break-after` プロパティは古いプロパティとなり、 {{cssxref("break-after")}} で置き換えられました。 + +互換性のため、 `page-break-after` はブラウザーでは `break-after` の別名として扱われます。これにより、 `page-break-after` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。 + +| page-break-after | break-after | +| ---------------- | ----------- | +| `auto` | `auto` | +| `left` | `left` | +| `right` | `right` | +| `avoid` | `avoid` | +| `always` | `page` | + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +### 脚注の後にページ区切りを設定 -
/* footnotes の後で新しいページに移ります */
+```css
+/* 脚注の後で新しいページに移ります */
 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")}}

- -

関連情報

- - +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}} +- {{cssxref("page-break-before")}}, {{cssxref("page-break-inside")}} +- {{cssxref("orphans")}}, {{cssxref("widows")}} diff --git a/files/ja/web/css/page-break-before/index.md b/files/ja/web/css/page-break-before/index.md index 50665b213f..67bf591de1 100644 --- a/files/ja/web/css/page-break-before/index.md +++ b/files/ja/web/css/page-break-before/index.md @@ -4,20 +4,22 @@ slug: Web/CSS/page-break-before tags: - CSS - CSS プロパティ - - CSS ページ付きメディア - - Reference - 改ページ + - Reference + - recipe:css-property +browser-compat: css.properties.page-break-before translation_of: Web/CSS/page-break-before --- -
{{CSSRef}}
+{{CSSRef}} -
このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。
+> **Warning:** このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。 -

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

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

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

+このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{ HTMLElement("div") }} には適用されません。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 page-break-before: auto;
 page-break-before: always;
 page-break-before: avoid;
@@ -29,118 +31,72 @@ page-break-before: verso;
 /* グローバル値 */
 page-break-before: inherit;
 page-break-before: initial;
+page-break-before: revert;
 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 と同じ働きをします。
-
- -

形式文法

+``` + +## 構文 + +### 値 + +- `auto` + - : 初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。 +- `always` + - : 要素の前で必ず改ページが行われるように強制します。 +- `avoid` + - : 要素の前で改ページされないようにします。 +- `left` + - : 要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。 +- `right` + - : 要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。 +- `recto` {{experimental_inline}} + - : 左から右に読むページにおいて `right` と同じ動作をします。右から左に読むページであれば `left` と同じ働きをします。 +- `verso` {{experimental_inline}} + - : 左から右に読むページにおいて `left` と同じ動作をします。右から左に読むページであれば `right` と同じ働きをします。 + +## 改ページの別名 + +`page-break-before` プロパティは古いプロパティとなり、 {{cssxref("break-before")}} によって置き換えられました。 + +互換性のため、 `page-break-before` はブラウザーから `break-before` の別名として扱われます。これにより、 `page-break-before` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。 + +| page-break-before | break-before | +| ----------------- | ------------ | +| `auto` | `auto` | +| `left` | `left` | +| `right` | `right` | +| `avoid` | `avoid` | +| `always` | `page` | + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +### ある要素の前で改ページを防ぐ -
/* div の前で改ページされないようにします */
+```css
+/* 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")}}

- -

関連情報

- - +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}} +- {{cssxref("page-break-after")}}, {{cssxref("page-break-inside")}} +- {{cssxref("orphans")}}, {{cssxref("widows")}} diff --git a/files/ja/web/css/page-break-inside/index.md b/files/ja/web/css/page-break-inside/index.md index 7856f39482..91d9959071 100644 --- a/files/ja/web/css/page-break-inside/index.md +++ b/files/ja/web/css/page-break-inside/index.md @@ -4,94 +4,88 @@ slug: Web/CSS/page-break-inside tags: - CSS - CSS プロパティ - - CSS ページ付きメディア - - Reference - 改ページ + - Reference + - recipe:css-property +browser-compat: css.properties.page-break-inside translation_of: Web/CSS/page-break-inside --- -
{{CSSRef}}
+{{CSSRef}} -
このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。
+> **Warning:** このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。 -

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

+CSS の **`page-break-inside`** プロパティは、現在の要素の*内側の* 改ページを調整します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 page-break-inside: auto;
 page-break-inside: avoid;
 
 /* グローバル値 */
 page-break-inside: inherit;
 page-break-inside: initial;
+page-break-inside: revert;
 page-break-inside: unset;
-
+``` + +## 構文 -

{{cssinfo}}

+### 値 -

改ページの別名

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

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

+## 改ページの別名 -

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

+`page-break-inside` プロパティは古いプロパティとなり、 {{cssxref("break-inside")}} によって置き換えられました。 - - - - - - - - - - - - - - - - - -
page-break-insidebreak-inside
autoauto
avoidavoid
+互換性のため、 `page-break-inside` はブラウザーから `break-inside` の別名として扱われます。これにより、 `page-break-inside` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。 -

構文

+| page-break-inside | break-inside | +| ----------------- | ------------ | +| `auto` | `auto` | +| `avoid` | `avoid` | -

値

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

形式文法

+## 形式文法 {{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 {
+## 例
+
+
要素の途中の改ページを防ぐ

+
+#### HTML
+
+```html
+

+  
これは最初の段落です。

+  

+    リスト
+    
    
+      
  1. one
    2. 
+
+    

+  

+  
    
+    
  • one
    • 
+
+  

+  
Tこれは第二段落です。

+  
これは第三段落です。文章の量が多くなっています。

+  
これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。

+

+```
+
+#### CSS
+
+```css
+.page {
   background-color: #8cffa0;
   height: 90px;
   width: 200px;
@@ -115,44 +109,23 @@ ol, ul, .list {
 
 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")}}

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Avoiding_page_breaks_inside_elements", 400, 160)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}} +- {{cssxref("page-break-after")}}, {{cssxref("page-break-before")}} +- {{cssxref("orphans")}}, {{cssxref("widows")}} -- cgit v1.2.3-54-g00ecf