From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/break-before/index.html | 193 +++++++++++++++++++++++++++++++ 1 file changed, 193 insertions(+) create mode 100644 files/ja/web/css/break-before/index.html (limited to 'files/ja/web/css/break-before') diff --git a/files/ja/web/css/break-before/index.html b/files/ja/web/css/break-before/index.html new file mode 100644 index 0000000000..f52d6657d0 --- /dev/null +++ b/files/ja/web/css/break-before/index.html @@ -0,0 +1,193 @@ +--- +title: break-before +slug: Web/CSS/break-before +tags: + - CSS + - CSS プロパティ + - CSS 断片化 + - CSS 段組みレイアウト + - Reference +translation_of: Web/CSS/break-before +--- +
{{CSSRef}}
+ +

CSS の break-before プロパティは、生成されたボックスの前で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。

+ +
/* 一般の区切り値 */
+break-before: auto;
+break-before: avoid;
+break-before: always;
+break-before: all;
+
+/* 改ページ値 */
+break-before: avoid-page;
+break-before: page;
+break-before: left;
+break-before: right;
+break-before: recto;
+break-before: verso;
+
+/* 段区切り値 */
+break-before: avoid-column;
+break-before: column;
+
+/* 領域区切り値 */
+break-before: avoid-region;
+break-before: region;
+
+/* グローバル値 */
+break-before: inherit;
+break-before: initial;
+break-before: unset;
+
+ +

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の break-before の値、包含要素の {{cssxref("break-inside")}} の値です。

+ +

区切られるかどうかを判断するために、以下の規則が適用されます。

+ +
    +
  1. 考慮される三つの値の中の何れかに区切りを強制する値 (always, left, right, page, column, region の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 break-before の値は break-after の値より優先し、それは更に break-inside よりも優先します)。
    2. +
  2. 考慮される三つの値の中に区切りを防止する値 (avoid, avoid-page, avoid-region, avoid-column の何れか) が含まれていた場合は、その場所で区切りは適用されません。
    3. +
+ +

強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 avoid に関する値に解決される要素の境界には追加されません。

+ +

{{cssinfo}}

+ +

構文

+ +

break-before プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+ +

値

+ +

一般の区切り値

+ +
+
auto
+
該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
+
avoid
+
該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
+
always {{experimental_inline}}
+
該当するボックスの直前で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。
+
all {{experimental_inline}}
+
該当するボックスの直前で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。
+
+ +

改ページ値

+ +
+
avoid-page
+
該当するボックスの直前の改ページを禁止します。
+
page
+
該当するボックスの直前で改ページを行います。
+
left
+
該当するボックスの直前で一つまたは二つの改ページを行い、次のページが左ページになるようにします。
+
right
+
該当するボックスの直前で一つまたは二つの改ページを行い、次のページが右ページになるようにします。
+
recto {{experimental_inline}}
+
該当するボックスの直前で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)
+
verso {{experimental_inline}}
+
該当するボックスの直前で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)
+
+ +

段区切り値

+ +
+
avoid-column
+
該当するボックスの直前の段区切りを禁止します。
+
column
+
該当するボックスの直前で段区切りを行います。
+
+ +

領域区切り値

+ +
+
avoid-region {{experimental_inline}}
+
該当するボックスの直前の領域区切りを禁止します。
+
region {{experimental_inline}}
+
該当するボックスの直前で領域区切りを行います。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

改ページの別名

+ +

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

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

ブラウザーにおいては always の値は page-break-* において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では always の値ではなく page の別名となっています。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}{{Spec2('CSS3 Fragmentation')}}recto および verso キーワードを追加。このプロパティのメディア種別を paged から {{xref_cssvisual}} に変更。異なる種類の区切りを持つ区切りアルゴリズムを定義した。
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}{{Spec2('CSS3 Regions')}}領域区切りを扱うようにプロパティを拡張した。 avoid-region および region キーワードを追加した。
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}{{Spec2('CSS3 Multicol')}}初回定義。 CSS 2.1 の {{cssxref("page-break-before")}} プロパティを拡張し、ページ区切りと段区切りの両方を扱うようにした。
+ +

ブラウザーの対応

+ + + +

段組みレイアウトでの対応

+ +

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

+ +

ページ化メディアでの対応

+ +

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

-- cgit v1.2.3-54-g00ecf