HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

ブレイク ビフォアー

break-beforeプロパティ

段組みの中のブロックレベル要素に対し、印刷時の改ページや段の区切り方を指定するプロパティです。こちらのプロパティは直前の要素に対して適用します。反対に、直後の要素に適用したい場合はbreak-afterプロパティを使用します。

  • 初期値

    auto

  • 継承

    不可

  • 適用できる要素

    ブロックレベル要素

次の値を指定することができます。「改ページ」は印刷時に適用されます。
2016年9月時点では、Firefoxは対応していません。

  • auto – 改ページや段の区切りを指定しない。初期値。
  • always – 改ページや段の区切りについて指定。
  • page – 強制的に改ページをする。
  • column – 強制的に段を区切る。
  • left – 改ページを行い、次のページが右側に来るように指定。
  • right – 改ページを行い、次のページが左側に来るように指定。
  • avoid – 改ページや段の区切りを行わないようにする。
  • avoid-page – 改ページをしないようにする。
  • avoide-column – 段の区切りをしないようにする。

パターン1

値に「page」を指定している例です。Webページの表示には影響しませんが、印刷時に改ページを適用します。

指定した値は直前の要素に適用されます。次の例では、id属性「title2」を持つh2要素の前のp要素に適用しています。

CSSコード例

<style>
section {
	column-count: 3;
}
.box1 #title2 {
	break-before: page;
}
</style>
<section class="box1">
	<h2>タイトル1</h2>
	<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。</p>
	<h2 id="title2">タイトル2</h2>
	<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。</p>
</section>

表示例:

pageを指定

パターン2

値に「column」を指定している例です。段組を区切ることができます。

CSSコード例

<style>
section {
	column-count: 3;
}
.box2 #title2 {
	break-before: column;
}
</style>
<section class="box2">
	<h2>タイトル1</h2>
	<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。</p>
	<h2 id="title2">タイトル2</h2>
	<p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。</p>
</section>

表示例:

columnを指定

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。