CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

The break-before property specifies whether or not a page break, column break, or region break should occur before the specified element.

break-before

　break-beforeプロパティは、生成されたボックスの前で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。なお、改ページを指定する値は印刷時に適用されます。

Syntax


break-before: 値;

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

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

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

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

初期値・適用対象・値の継承

初期値: auto
適用対象: ブロックレベル要素
値の継承: しない
計算値: 指定通り
アニメーションの種類: 離散値

値

一般の区切り値

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

改ページ値

avoid-page: 該当するボックスの直前の改ページを避けます。
page: 該当するボックスの直前で改ページを常に行います。
left: 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが左ページとして始まるようにします。
right: 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが右ページとして始まるようにします。
recto: 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)
verso: 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)

段区切り値

avoid-column: 該当するボックスの直前の段区切りを避けます。
column: 該当するボックスの直前で段区切りを常に行います。

領域区切り値

avoid-region: 該当するボックスの直前の領域区切りを避けます。
region: 該当するボックスの直前で領域区切りを常に行います。

グローバル値

inherit: 要素のプロパティの計算値を親要素から取得するよう指定します。
initial: 要素にプロパティの初期値 (または既定値) を設定します。
unset: プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。

改ページの別名

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

page-break-before	break-before
auto	auto
left	left
right	right
avoid	avoid
always	page

Example of use

段区切りのサンプル

Before setting break-before

HTML5 とは

　HTML5 とは、HTML のバージョン5、改訂第5版です。現在、ウェブページを作成する際に一般的に利用されるのは HTML 4.01 ですが、次世代のウェブ環境に合わせて、新たに仕様を検討されているのが HTML5 です。

CSS とは

　CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3C による仕様の一つ。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの、具体的な仕様の一つ。

After setting break-before

HTML5 とは

　HTML5とは、HTML のバージョン5、改訂第5版です。現在、ウェブページを作成する際に一般的に利用されるのは HTML 4.01 ですが、次世代のウェブ環境に合わせて、新たに仕様を検討されているのが HTML5 です。

CSS とは

HTML source


<div>
	<h2>HTML5 とは</h2>
	<p>　HTML5とは、...</p>
	<h2 class="break">CSS とは</h2>
	<p>　CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、...</p>
</div>

CSS source


div {
	column-count: 3;
}

h2 {
	padding: 0.5em 1em;
	border: 0.5em solid navy;
	border-radius: 0.2em;
}

.break {
	break-before: column;
}

break-before: columnでCSS見出しを次の段の先頭へ移動した表示例

　column-countを使いカラムを 3 に設定し 3段組のレイアウトにしただけなのが設定前（上段）で、それの２つ目の h2要素（「CSSとは」）に break-before:column; を設定し段区切りを行いました。すると break-beforeを設定した h2要素（「CSSとは」）が段（この例では2段目）の一番上に表示されています。

改ページのサンプル

　このページを印刷プレビューで見てみて下さい。h3要素の前で改ページするように設定しています。

CSS source


@media print {
	h3 {
		break-before: page;
	}
}

　実際に印刷した場合のサンプルPDF → こちら