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-break-inside/index.md | 181 ++++++++++++---------------- 1 file changed, 77 insertions(+), 104 deletions(-) (limited to 'files/ja/web/css/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 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