---
title: break-before
slug: Web/CSS/break-before
tags:
  - CSS
  - CSS プロパティ
  - CSS 断片化
  - CSS 段組みレイアウト
  - Reference
translation_of: Web/CSS/break-before
---
<div>{{CSSRef}}</div>

<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>break-before</code></strong> プロパティは、生成されたボックスの前で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。</p>

<pre class="brush:css no-line-numbers">/* 一般の区切り値 */
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;
</pre>

<p>区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の <code>break-before</code> の値、包含要素の {{cssxref("break-inside")}} の値です。</p>

<p>区切られるかどうかを判断するために、以下の規則が適用されます。</p>

<ol>
 <li>考慮される三つの値の中の何れかに<em>区切りを強制する値</em> (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code>, <code>region</code> の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 <code>break-before</code> の値は <code>break-after</code> の値より優先し、それは更に <code>break-inside</code> よりも優先します)。</li>
 <li>考慮される三つの値の中に<em>区切りを防止する値</em> (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code> の何れか) が含まれていた場合は、その場所で区切りは適用されません。</li>
</ol>

<p>強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 <code>avoid</code> に関する値に解決される要素の境界には追加されません。</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">構文</h2>

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

<h3 id="Values" name="Values">値</h3>

<h4 id="Generic_break_values" name="Generic_break_values">一般の区切り値</h4>

<dl>
 <dt><code>auto</code></dt>
 <dd>該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。</dd>
 <dt><code>avoid</code></dt>
 <dd>該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。</dd>
 <dt><code>always</code> {{experimental_inline}}</dt>
 <dd>該当するボックスの直前で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。</dd>
 <dt><code>all</code> {{experimental_inline}}</dt>
 <dd>該当するボックスの直前で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。</dd>
</dl>

<h4 id="Page_break_values" name="Page_break_values">改ページ値</h4>

<dl>
 <dt><code>avoid-page</code></dt>
 <dd>該当するボックスの直前の改ページを禁止します。</dd>
 <dt><code>page</code></dt>
 <dd>該当するボックスの直前で改ページを行います。</dd>
 <dt><code>left</code></dt>
 <dd>該当するボックスの直前で一つまたは二つの改ページを行い、次のページが左ページになるようにします。</dd>
 <dt><code>right</code></dt>
 <dd>該当するボックスの直前で一つまたは二つの改ページを行い、次のページが右ページになるようにします。</dd>
 <dt><code>recto</code> {{experimental_inline}}</dt>
 <dd>該当するボックスの直前で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)</dd>
 <dt><code>verso</code> {{experimental_inline}}</dt>
 <dd>該当するボックスの直前で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)</dd>
</dl>

<h4 id="Column_break_values" name="Column_break_values">段区切り値</h4>

<dl>
 <dt><code>avoid-column</code></dt>
 <dd>該当するボックスの直前の段区切りを禁止します。</dd>
 <dt><code>column</code></dt>
 <dd>該当するボックスの直前で段区切りを行います。</dd>
</dl>

<h4 id="領域区切り値">領域区切り値</h4>

<dl>
 <dt><code>avoid-region</code> {{experimental_inline}}</dt>
 <dd>該当するボックスの直前の領域区切りを禁止します。</dd>
 <dt><code>region</code> {{experimental_inline}}</dt>
 <dd>該当するボックスの直前で領域区切りを行います。</dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">page-break-before</th>
   <th scope="col">break-before</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>auto</code></td>
   <td><code>auto</code></td>
  </tr>
  <tr>
   <td><code>left</code></td>
   <td><code>left</code></td>
  </tr>
  <tr>
   <td><code>right</code></td>
   <td><code>right</code></td>
  </tr>
  <tr>
   <td><code>avoid</code></td>
   <td><code>avoid</code></td>
  </tr>
  <tr>
   <td><code>always</code></td>
   <td><code>page</code></td>
  </tr>
 </tbody>
</table>

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

<h2 id="Specifications" name="Specifications">仕様書</h2>

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

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<h3 id="Support_in_multi-column_layout" name="Support_in_multi-column_layout">段組みレイアウトでの対応</h3>

<p>{{Compat("css.properties.break-before.multicol_context")}}</p>

<h3 id="Support_in_paged_media" name="Support_in_paged_media">ページ化メディアでの対応</h3>

<p>{{Compat("css.properties.break-before.paged_context")}}</p>