From 97d320b1bb52ffd636dabd43eb2d150e3faee441 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 2 Dec 2021 09:44:45 +0900 Subject: CSS Fragment 関連のプロパティを更新準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/box-decoration-break/index.html | 153 -------------- files/ja/web/css/box-decoration-break/index.md | 153 ++++++++++++++ files/ja/web/css/break-after/index.html | 257 ----------------------- files/ja/web/css/break-after/index.md | 257 +++++++++++++++++++++++ files/ja/web/css/break-before/index.html | 191 ----------------- files/ja/web/css/break-before/index.md | 191 +++++++++++++++++ files/ja/web/css/break-inside/index.html | 205 ------------------ files/ja/web/css/break-inside/index.md | 205 ++++++++++++++++++ files/ja/web/css/css_fragmentation/index.html | 47 ----- files/ja/web/css/css_fragmentation/index.md | 47 +++++ files/ja/web/css/orphans/index.html | 113 ---------- files/ja/web/css/orphans/index.md | 113 ++++++++++ 12 files changed, 966 insertions(+), 966 deletions(-) delete mode 100644 files/ja/web/css/box-decoration-break/index.html create mode 100644 files/ja/web/css/box-decoration-break/index.md delete mode 100644 files/ja/web/css/break-after/index.html create mode 100644 files/ja/web/css/break-after/index.md delete mode 100644 files/ja/web/css/break-before/index.html create mode 100644 files/ja/web/css/break-before/index.md delete mode 100644 files/ja/web/css/break-inside/index.html create mode 100644 files/ja/web/css/break-inside/index.md delete mode 100644 files/ja/web/css/css_fragmentation/index.html create mode 100644 files/ja/web/css/css_fragmentation/index.md delete mode 100644 files/ja/web/css/orphans/index.html create mode 100644 files/ja/web/css/orphans/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/box-decoration-break/index.html b/files/ja/web/css/box-decoration-break/index.html deleted file mode 100644 index e2069cb608..0000000000 --- a/files/ja/web/css/box-decoration-break/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: box-decoration-break -slug: Web/CSS/box-decoration-break -tags: - - CSS - - CSS プロパティ - - CSS 断片化 - - Experimental - - Reference -translation_of: Web/CSS/box-decoration-break ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の box-decoration-break プロパティは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。

- -
{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}
- - - -

指定された値は、次のプロパティの表示方法に影響を与えます。

- - - -

構文

- -
/* キーワード値 */
-box-decoration-break: slice;
-box-decoration-break: clone;
-
-/* グローバル値 */
-box-decoration-break: initial;
-box-decoration-break: inherit;
-box-decoration-break: unset;
-
- -

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

- -

値

- -
-
slice
-
要素は最初、ボックスが断片化していないかのように描画され、その後でこの仮想ボックスに描画されたものが、それぞれの行/段/ページのための断片に分割されます。なお、仮想ボックスはインライン方向に分割された場合には独自の高さを使用し、ブロック方向に分割された場合は独自の幅を使用するため、それぞれの断片ごとに異なる場合があることに注意してください。詳しくは CSS の仕様書を参照してください。
-
clone
-
それぞれの断片が、それぞれの断片を囲む指定された境界、パディング、マージンを伴って個別に描画されます。 {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }} はそれぞれの断片に個別に適用されます。背景もそれぞれの断片で個別に描画されます。つまり、 {{ Cssxref("background-repeat") }}: no-repeat がついた背景画像であっても、複数回繰り返されます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

インラインボックスの断片化

- -

改行を含むインライン要素は次のように整形されます。

- -
.example {
-  background: linear-gradient(to bottom right, yellow, green);
-  box-shadow:
-    8px 8px 10px 0px deeppink,
-    -5px -5px 5px 0px blue,
-    5px 5px 15px 0px yellow;
-  padding: 0em 1em;
-  border-radius: 16px;
-  border-style: solid;
-  margin-left: 10px;
-  font: 24px sans-serif;
-  line-height: 2;
-}
-
-...
-<span class="example">The<br>quick<br>orange fox</span>
- -

... 結果は以下のようになります。

- -

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

- -

上記のスタイルに box-decoration-break: clone を追加すると、

- -
-webkit-box-decoration-break: clone;
-box-decoration-break: clone;
-
- -

... 以下のような結果になります。

- -

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

- -

ブラウザーで上記の二つのインラインの例を試してみることができます。

- -

これはインライン要素に大きな border-radius の値を使用した例です。二番目の "iM" には、 "i" と "M" の間に改行があります。それに対して、最初の "iM" には改行がありません。なお、２つの断片の描画結果を水平に並べると、断片化されていない描画結果と同じになります。

- -

A screenshot of the rendering of the second inline element example.

- -

ブラウザーで上の例を試してみることができます。

- -

ブロックボックスの断片化

- -

上記と同様のスタイルのブロックボックスは、断片化がないと次のような結果になります。

- -

A screenshot of the rendering of the block element used in the examples without any fragmentation.

- -

上記のブロックが三つの段に分割されると、次のような結果になります。

- -

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

- -

なお、これらの断片を縦に並べると、断片化されていない描画結果と同じになります。

- -

そして、同じ例を box-decoration-break: clone で整形すると、次のような結果になります。

- -

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

- -

なお、それぞれの断片に同じ境界線、ボックスの影、背景が複製されます。

- -

ブラウザーで上の例を試してみることができます。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}{{ Spec2('CSS3 Fragmentation') }}初回定義。
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.box-decoration-break")}}

- -

関連情報

- - diff --git a/files/ja/web/css/box-decoration-break/index.md b/files/ja/web/css/box-decoration-break/index.md new file mode 100644 index 0000000000..e2069cb608 --- /dev/null +++ b/files/ja/web/css/box-decoration-break/index.md @@ -0,0 +1,153 @@ +--- +title: box-decoration-break +slug: Web/CSS/box-decoration-break +tags: + - CSS + - CSS プロパティ + - CSS 断片化 + - Experimental + - Reference +translation_of: Web/CSS/box-decoration-break +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の box-decoration-break プロパティは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。

+ +
{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}
+ + + +

指定された値は、次のプロパティの表示方法に影響を与えます。

+ + + +

構文

+ +
/* キーワード値 */
+box-decoration-break: slice;
+box-decoration-break: clone;
+
+/* グローバル値 */
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+
+ +

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

+ +

値

+ +
+
slice
+
要素は最初、ボックスが断片化していないかのように描画され、その後でこの仮想ボックスに描画されたものが、それぞれの行/段/ページのための断片に分割されます。なお、仮想ボックスはインライン方向に分割された場合には独自の高さを使用し、ブロック方向に分割された場合は独自の幅を使用するため、それぞれの断片ごとに異なる場合があることに注意してください。詳しくは CSS の仕様書を参照してください。
+
clone
+
それぞれの断片が、それぞれの断片を囲む指定された境界、パディング、マージンを伴って個別に描画されます。 {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }} はそれぞれの断片に個別に適用されます。背景もそれぞれの断片で個別に描画されます。つまり、 {{ Cssxref("background-repeat") }}: no-repeat がついた背景画像であっても、複数回繰り返されます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

インラインボックスの断片化

+ +

改行を含むインライン要素は次のように整形されます。

+ +
.example {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow:
+    8px 8px 10px 0px deeppink,
+    -5px -5px 5px 0px blue,
+    5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}
+
+...
+<span class="example">The<br>quick<br>orange fox</span>
+ +

... 結果は以下のようになります。

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

+ +

上記のスタイルに box-decoration-break: clone を追加すると、

+ +
-webkit-box-decoration-break: clone;
+box-decoration-break: clone;
+
+ +

... 以下のような結果になります。

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

+ +

ブラウザーで上記の二つのインラインの例を試してみることができます。

+ +

これはインライン要素に大きな border-radius の値を使用した例です。二番目の "iM" には、 "i" と "M" の間に改行があります。それに対して、最初の "iM" には改行がありません。なお、２つの断片の描画結果を水平に並べると、断片化されていない描画結果と同じになります。

+ +

A screenshot of the rendering of the second inline element example.

+ +

ブラウザーで上の例を試してみることができます。

+ +

ブロックボックスの断片化

+ +

上記と同様のスタイルのブロックボックスは、断片化がないと次のような結果になります。

+ +

A screenshot of the rendering of the block element used in the examples without any fragmentation.

+ +

上記のブロックが三つの段に分割されると、次のような結果になります。

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

+ +

なお、これらの断片を縦に並べると、断片化されていない描画結果と同じになります。

+ +

そして、同じ例を box-decoration-break: clone で整形すると、次のような結果になります。

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

+ +

なお、それぞれの断片に同じ境界線、ボックスの影、背景が複製されます。

+ +

ブラウザーで上の例を試してみることができます。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}{{ Spec2('CSS3 Fragmentation') }}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.box-decoration-break")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/break-after/index.html b/files/ja/web/css/break-after/index.html deleted file mode 100644 index 2c4374e1be..0000000000 --- a/files/ja/web/css/break-after/index.html +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: break-after -slug: Web/CSS/break-after -tags: - - CSS - - CSS Fragmentation - - CSS Multi-column Layout - - CSS Property - - NeedsExample - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/break-after ---- -
{{CSSRef}}
- -

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

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

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の break-after の値、次の要素の {{cssxref("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 に関する値に解決される要素の境界には追加されません。

- -

構文

- -

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

- -

値

- -

一般の区切り値

- -
-
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}}
-
該当するボックスの直後で領域区切りを行います。
-
- -

改ページの別名

- -

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

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

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

-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

きれいに段に分割

- -

次の例では、すべての段にまたがる <h1> (column-span: all を使用して実現) と、一連の <h2> と段落を column-width: 200px を使用して段組みレイアウトしたコンテナーを用意しています。

- -

既定では、小見出しと段落は、見出しの位置が統一されていないため、かなり乱雑にレイアウトされていました。しかし、 break-after: column を <p> 要素に使うことで、それぞれの要素の後に強制的に改行するようにしたので、各段の先頭に <h2> がきちんと配置されます。

- -

HTML

- -
<article>
-  <h1>Main heading</h1>
-
-  <h2>Subheading</h2>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus. Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p>
-
-  <h2>Subheading</h2>
-
-  <p>Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p>
-
-  <h2>Subheading</h2>
-
-  <p>Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis. Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat egestas tellus.
-
-  <h2>Subheading</h2>
-
-  <p>In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl, sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.</p>
-</article>
- -

CSS

- -
html {
-  font-family: helvetica, arial, sans-serif;
-}
-
-h1 {
-  font-size: 3rem;
-  letter-spacing: 2px;
-  column-span: all;
-}
-
-h2 {
-  font-size: 1.2rem;
-  color: red;
-  letter-spacing: 1px;
-}
-
-p {
-  line-height: 1.5;
-  break-after: column;
-}
-
-article {
-  column-width: 200px;
-  gap: 20px;
-}
- -

結果

- -

{{EmbedLiveSample('Breaking_into_neat_columns', '100%', 600)}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

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

- -

ページメディアでの対応

- -

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

diff --git a/files/ja/web/css/break-after/index.md b/files/ja/web/css/break-after/index.md new file mode 100644 index 0000000000..2c4374e1be --- /dev/null +++ b/files/ja/web/css/break-after/index.md @@ -0,0 +1,257 @@ +--- +title: break-after +slug: Web/CSS/break-after +tags: + - CSS + - CSS Fragmentation + - CSS Multi-column Layout + - CSS Property + - NeedsExample + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/break-after +--- +
{{CSSRef}}
+ +

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

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

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の break-after の値、次の要素の {{cssxref("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 に関する値に解決される要素の境界には追加されません。

+ +

構文

+ +

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

+ +

値

+ +

一般の区切り値

+ +
+
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}}
+
該当するボックスの直後で領域区切りを行います。
+
+ +

改ページの別名

+ +

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

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

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

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

きれいに段に分割

+ +

次の例では、すべての段にまたがる <h1> (column-span: all を使用して実現) と、一連の <h2> と段落を column-width: 200px を使用して段組みレイアウトしたコンテナーを用意しています。

+ +

既定では、小見出しと段落は、見出しの位置が統一されていないため、かなり乱雑にレイアウトされていました。しかし、 break-after: column を <p> 要素に使うことで、それぞれの要素の後に強制的に改行するようにしたので、各段の先頭に <h2> がきちんと配置されます。

+ +

HTML

+ +
<article>
+  <h1>Main heading</h1>
+
+  <h2>Subheading</h2>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus. Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p>
+
+  <h2>Subheading</h2>
+
+  <p>Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p>
+
+  <h2>Subheading</h2>
+
+  <p>Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis. Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat egestas tellus.
+
+  <h2>Subheading</h2>
+
+  <p>In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl, sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.</p>
+</article>
+ +

CSS

+ +
html {
+  font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+  font-size: 3rem;
+  letter-spacing: 2px;
+  column-span: all;
+}
+
+h2 {
+  font-size: 1.2rem;
+  color: red;
+  letter-spacing: 1px;
+}
+
+p {
+  line-height: 1.5;
+  break-after: column;
+}
+
+article {
+  column-width: 200px;
+  gap: 20px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Breaking_into_neat_columns', '100%', 600)}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

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

+ +

ページメディアでの対応

+ +

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

diff --git a/files/ja/web/css/break-before/index.html b/files/ja/web/css/break-before/index.html deleted file mode 100644 index 2850a4bd25..0000000000 --- a/files/ja/web/css/break-before/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -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")}}

diff --git a/files/ja/web/css/break-before/index.md b/files/ja/web/css/break-before/index.md new file mode 100644 index 0000000000..2850a4bd25 --- /dev/null +++ b/files/ja/web/css/break-before/index.md @@ -0,0 +1,191 @@ +--- +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")}}

diff --git a/files/ja/web/css/break-inside/index.html b/files/ja/web/css/break-inside/index.html deleted file mode 100644 index 573f2aa905..0000000000 --- a/files/ja/web/css/break-inside/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: break-inside -slug: Web/CSS/break-inside -tags: - - CSS - - CSS Fragmentation - - CSS Multi-column Layout - - CSS Property - - NeedsExample - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/break-inside ---- -
{{CSSRef}}
- -

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

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

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の {{cssxref("break-before")}} の値、包含要素の 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 に関する値に解決される要素の境界には追加されません。

- -

構文

- -

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

- -

値

- -
-
auto
-
主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
-
avoid
-
主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
-
avoid-page
-
主ボックスの途中の改ページを禁止します。
-
avoid-column
-
主ボックスの途中の段区切りを禁止します。
-
avoid-region {{experimental_inline}}
-
主ボックスの途中の領域区切りを禁止します。
-
- -

改ページの別名

- -

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

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

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

図の中の改行を防ぐ

- -

次の例では、すべての段にまたがる <h1> (column-span: all を使用して実現) と、 column-width: 200px を使用して複数の段に配置された一連の段落を含むコンテナーを用意しています。また、画像とキャプションを含む <figure> もあります。

- -

既定では、画像とキャプションの間に改行が入る可能性がありますが、これは私たちが望んでいるものではありません。これを避けるために、 break-inside: avoid を <figure> に設定しています。

- -

HTML

- -
<article>
-  <h1>Main heading</h1>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus. Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p>
-
-  <figure>
-    <img src="https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png">
-    <figcaption>The Firefox logo — fox wrapped around the world</figcaption>
-  </figure>
-
-  <p>Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p>
-
-  <p>In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl, sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.</p>
-</article>
- -

CSS

- -
html {
-  font-family: helvetica, arial, sans-serif;
-}
-
-body {
-  width: 80%;
-  margin: 0 auto;
-}
-
-h1 {
-  font-size: 3rem;
-  letter-spacing: 2px;
-  column-span: all;
-}
-
-h1 + p {
-  margin-top: 0;
-}
-
-p {
-  line-height: 1.5;
-  break-after: column;
-}
-
-figure {
-  break-inside: avoid;
-}
-
-img {
-  max-width: 70%;
-  display: block;
-  margin: 0 auto;
-}
-
-figcaption {
-  font-style: italic;
-  font-size: 0.8rem;
-  width: 70%;
-}
-
-article {
-  column-width: 200px;
-  gap: 20px;
-}
- -

結果

- -

{{EmbedLiveSample('Avoiding_breaking_inside_a_figure', '100%', 600)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}{{Spec2('CSS3 Fragmentation')}}変更なし。
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}{{Spec2('CSS3 Regions')}}領域区切りを扱うようにプロパティを拡張した。
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}{{Spec2('CSS3 Multicol')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

互換性のメモ

- -

Forefox 65 以前では、より古い {{cssxref("page-break-inside")}} プロパティがページと同様に段の分割も防止するするよう動作します。後方互換性のために両方のプロパティを追加してください。

- -

古い WebKit ベースのブラウザーでは、接頭辞付きの -webkit-column-break-inside プロパティで段区切りを制御することができます。

diff --git a/files/ja/web/css/break-inside/index.md b/files/ja/web/css/break-inside/index.md new file mode 100644 index 0000000000..573f2aa905 --- /dev/null +++ b/files/ja/web/css/break-inside/index.md @@ -0,0 +1,205 @@ +--- +title: break-inside +slug: Web/CSS/break-inside +tags: + - CSS + - CSS Fragmentation + - CSS Multi-column Layout + - CSS Property + - NeedsExample + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/break-inside +--- +
{{CSSRef}}
+ +

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

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

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の {{cssxref("break-before")}} の値、包含要素の 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 に関する値に解決される要素の境界には追加されません。

+ +

構文

+ +

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

+ +

値

+ +
+
auto
+
主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
+
avoid
+
主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
+
avoid-page
+
主ボックスの途中の改ページを禁止します。
+
avoid-column
+
主ボックスの途中の段区切りを禁止します。
+
avoid-region {{experimental_inline}}
+
主ボックスの途中の領域区切りを禁止します。
+
+ +

改ページの別名

+ +

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

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

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

図の中の改行を防ぐ

+ +

次の例では、すべての段にまたがる <h1> (column-span: all を使用して実現) と、 column-width: 200px を使用して複数の段に配置された一連の段落を含むコンテナーを用意しています。また、画像とキャプションを含む <figure> もあります。

+ +

既定では、画像とキャプションの間に改行が入る可能性がありますが、これは私たちが望んでいるものではありません。これを避けるために、 break-inside: avoid を <figure> に設定しています。

+ +

HTML

+ +
<article>
+  <h1>Main heading</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus. Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p>
+
+  <figure>
+    <img src="https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png">
+    <figcaption>The Firefox logo — fox wrapped around the world</figcaption>
+  </figure>
+
+  <p>Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p>
+
+  <p>In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl, sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.</p>
+</article>
+ +

CSS

+ +
html {
+  font-family: helvetica, arial, sans-serif;
+}
+
+body {
+  width: 80%;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 3rem;
+  letter-spacing: 2px;
+  column-span: all;
+}
+
+h1 + p {
+  margin-top: 0;
+}
+
+p {
+  line-height: 1.5;
+  break-after: column;
+}
+
+figure {
+  break-inside: avoid;
+}
+
+img {
+  max-width: 70%;
+  display: block;
+  margin: 0 auto;
+}
+
+figcaption {
+  font-style: italic;
+  font-size: 0.8rem;
+  width: 70%;
+}
+
+article {
+  column-width: 200px;
+  gap: 20px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Avoiding_breaking_inside_a_figure', '100%', 600)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}{{Spec2('CSS3 Fragmentation')}}変更なし。
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}{{Spec2('CSS3 Regions')}}領域区切りを扱うようにプロパティを拡張した。
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

互換性のメモ

+ +

Forefox 65 以前では、より古い {{cssxref("page-break-inside")}} プロパティがページと同様に段の分割も防止するするよう動作します。後方互換性のために両方のプロパティを追加してください。

+ +

古い WebKit ベースのブラウザーでは、接頭辞付きの -webkit-column-break-inside プロパティで段区切りを制御することができます。

diff --git a/files/ja/web/css/css_fragmentation/index.html b/files/ja/web/css/css_fragmentation/index.html deleted file mode 100644 index be4cb944d8..0000000000 --- a/files/ja/web/css/css_fragmentation/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: CSS 分割 -slug: Web/CSS/CSS_Fragmentation -tags: - - CSS - - CSS 分割 - - Overview - - リファレンス -translation_of: Web/CSS/CSS_Fragmentation ---- -
{{cssref}}
- -

CSS 分割は CSS のモジュールの一つで、コンテンツがページ、領域、段をまたがって分割された (断片化が発生した) ときにどのように表示するかを定義します。

- -

分割が発生するのは、インラインボックスが複数の行に渡る場合です。また、ブロックが段組みレイアウトコンテナーの中で複数の段にまたがる場合や、印刷時にページにまたがる場合です。いずれの要素の表示される断片も分割と呼ばれています。

- -

リファレンス

- -
- -
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS3 Fragmentation')}}{{Spec2('CSS3 Fragmentation')}}初回定義。
diff --git a/files/ja/web/css/css_fragmentation/index.md b/files/ja/web/css/css_fragmentation/index.md new file mode 100644 index 0000000000..be4cb944d8 --- /dev/null +++ b/files/ja/web/css/css_fragmentation/index.md @@ -0,0 +1,47 @@ +--- +title: CSS 分割 +slug: Web/CSS/CSS_Fragmentation +tags: + - CSS + - CSS 分割 + - Overview + - リファレンス +translation_of: Web/CSS/CSS_Fragmentation +--- +
{{cssref}}
+ +

CSS 分割は CSS のモジュールの一つで、コンテンツがページ、領域、段をまたがって分割された (断片化が発生した) ときにどのように表示するかを定義します。

+ +

分割が発生するのは、インラインボックスが複数の行に渡る場合です。また、ブロックが段組みレイアウトコンテナーの中で複数の段にまたがる場合や、印刷時にページにまたがる場合です。いずれの要素の表示される断片も分割と呼ばれています。

+ +

リファレンス

+ +
+ +
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS3 Fragmentation')}}{{Spec2('CSS3 Fragmentation')}}初回定義。
diff --git a/files/ja/web/css/orphans/index.html b/files/ja/web/css/orphans/index.html deleted file mode 100644 index 1621e1d75f..0000000000 --- a/files/ja/web/css/orphans/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: orphans -slug: Web/CSS/orphans -tags: - - CSS - - CSS プロパティ - - CSS 断片化 - - Reference - - Web -translation_of: Web/CSS/orphans ---- -
{{CSSRef}}
- -

orphans は CSS のプロパティで、ページ、領域、段の最下部に表示されるブロックコンテナーの最小行数を設定します。

- -
/* <integer> 値 */
-orphans: 2;
-orphans: 3;
-
-/* Global values */
-orphans: inherit;
-orphans: initial;
-orphans: unset;
-
- -
-

組版において、 orphan とは段落の最初の行がページの末尾に単独で現れることです。 (段落は次のページへ続きます。)

-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
{{cssxref("<integer>")}}
-
区切りの前の新しい断片の末尾に残すことができる最小行数です。値は正の数である必要があります。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div>
-  <p>これは幾らかのテキストを含む最初の段落です。</p>
-  <p>これは最初の段落よりも多くのテキストを含む第二の段落です。これは widow がどの様に動作するのかを示すために用います。</p>
-  <p>これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。</p>
-</div>
-
- -

CSS

- -
div {
-  background-color: #8cffa0;
-  height: 150px;
-  columns: 3;
-  orphans: 3;
-}
-
-p {
-  background-color: #8ca0ff;
-}
-
-p:first-child {
-  margin-top: 0;
-}
-
- -

結果

- -

{{EmbedLiveSample("Example", 380, 150)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}{{Spec2('CSS3 Fragmentation')}}orphans をページ、領域、段など、断片の種類によらず適用するように拡張
{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの対応

- -
-

{{Compat("css.properties.orphans")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/orphans/index.md b/files/ja/web/css/orphans/index.md new file mode 100644 index 0000000000..1621e1d75f --- /dev/null +++ b/files/ja/web/css/orphans/index.md @@ -0,0 +1,113 @@ +--- +title: orphans +slug: Web/CSS/orphans +tags: + - CSS + - CSS プロパティ + - CSS 断片化 + - Reference + - Web +translation_of: Web/CSS/orphans +--- +
{{CSSRef}}
+ +

orphans は CSS のプロパティで、ページ、領域、段の最下部に表示されるブロックコンテナーの最小行数を設定します。

+ +
/* <integer> 値 */
+orphans: 2;
+orphans: 3;
+
+/* Global values */
+orphans: inherit;
+orphans: initial;
+orphans: unset;
+
+ +
+

組版において、 orphan とは段落の最初の行がページの末尾に単独で現れることです。 (段落は次のページへ続きます。)

+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
{{cssxref("<integer>")}}
+
区切りの前の新しい断片の末尾に残すことができる最小行数です。値は正の数である必要があります。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div>
+  <p>これは幾らかのテキストを含む最初の段落です。</p>
+  <p>これは最初の段落よりも多くのテキストを含む第二の段落です。これは widow がどの様に動作するのかを示すために用います。</p>
+  <p>これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: #8cffa0;
+  height: 150px;
+  columns: 3;
+  orphans: 3;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 380, 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}{{Spec2('CSS3 Fragmentation')}}orphans をページ、領域、段など、断片の種類によらず適用するように拡張
{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの対応

+ +
+

{{Compat("css.properties.orphans")}}

+
+ +

関連情報

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