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-break-inside/index.html | 158 -------------------------- files/ja/web/css/page-break-inside/index.md | 158 ++++++++++++++++++++++++++ 2 files changed, 158 insertions(+), 158 deletions(-) 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/css/page-break-inside') 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