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/page-break-inside/index.html | 160 ++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 files/ja/web/css/page-break-inside/index.html (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 new file mode 100644 index 0000000000..f3ab2e1d65 --- /dev/null +++ b/files/ja/web/css/page-break-inside/index.html @@ -0,0 +1,160 @@ +--- +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