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/box-decoration-break/index.html | 155 +++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 files/ja/web/css/box-decoration-break/index.html (limited to 'files/ja/web/css/box-decoration-break') diff --git a/files/ja/web/css/box-decoration-break/index.html b/files/ja/web/css/box-decoration-break/index.html new file mode 100644 index 0000000000..b370a57727 --- /dev/null +++ b/files/ja/web/css/box-decoration-break/index.html @@ -0,0 +1,155 @@ +--- +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")}}

+ +

関連情報

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