break-after:要素のボックスが終了した後にページやカラムをどのように区切るかを指定する
初期値 | auto |
適用対象 | ブロックレベル要素 |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
break-afterプロパティの説明
break-after
は、要素のボックスが終了した後にページやカラムをどのように区切るかを指定します。例えば、カラムの途中でページ区切りやカラム区切りが発生する場合に、ボックスの直後に区切りを入れるか、禁止するかを選べます。
これはブロックレベル要素のボックスの振る舞いに影響します。逆にボックスを持たない内容には影響を与えません。ブラウザで閲覧することを前提としたウェブサイトで、印刷で出力する祭のレイアウトや他のアプリケーションで開く場合の見栄えを調整する時に役立つかもしれません。
区切りの発生については、いくつかの特徴があります。
- 区切りの対象となった要素は、直前に配置された要素の
break-after
の値、直後に配置された要素のbreak-before
の値、包含要素のbreak-inside
の値から影響を受けます。 - 区切りの挿入が考慮される場所で
always
、left
、right
、page
、column
、region
のいずれかの値を持つ要素があれば、その振る舞いが優先されます。 - 区切りの挿入が考慮される場所で
avoid
、avoid-page
、avoid-region
、avoid-column
のいずれかの値を持つ要素があれば、その箇所で区切りを行わないようにします。
break-afterに指定できる値
一般的な値
- auto
- ボックスの直後に何らかの区切りが挿入可能であれば許可します。これが初期値です。
- avoid
- ボックスの直後に何らかの区切りが挿入可能であっても禁止します。
- always
- ボックスが終了した時点で強制的に改ページを行います。カラムであれば段ごとに区切りを挿入します。ページ付きメディアの場合は、段組みのコンテナでない限りページ区切りを挿入します。
- all
- ボックスが終了した時点で強制的に改ページを行います。全てのコンテキストで分割しうる形を取ります。ページ付きメディアの中で段組みコンテナがある場合は、ページ区切りと段区切りを行います。
ページ区切り値
- page
- ボックスが終了した時点で改ページを行います。
- avoid-page
- ボックスが終了した時点での改ページを禁止します。
- left
- ボックスが終了した時点で改ページを行い、次のページが左ページになるようにします。
- right
- ボックスが終了した時点で改ページを行い、次のページが右ページになるようにします。
- recto
- ボックスが終了した時点で改ページを行い、次のページが奇数のページになるようにします。奇数ページは、右綴じの場合は左側のページ、左綴じの場合は右側のページになります。
- verso
- ボックスが終了した時点で改ページを行い、次のページが偶数のページになるようにします。偶数ページは、右綴じの場合は右側のページ、左綴じの場合は左側のページになります。
カラム区切り値
- column
- ボックスが終了した時点でカラム区切りを行います。
- avoid-page
- ボックスが終了した時点でのカラム区切りを禁止します。
リージョン区切り値
- region
- ボックスが終了した時点でリージョン区切りを行います。
- avoid-region
- ボックスが終了した時点でのリージョン区切りを禁止します。
break-afterの使い方とサンプル
break-after
プロパティの構文は以下の通りです。
CSS
/* 一般的な区切り値 */
break-after: auto;
break-after: avoid;
break-after: always;
break-after: all;
/* ページ区切り値 */
break-after: page;
break-after: avoid-page;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;
/* カラム区切り値 */
break-after: column;
break-after: avoid-column;
/* リージョン区切り値 */
break-after: region;
break-after: avoid-region;
/* グローバル値 */
break-after: inherit;
break-after: initial;
break-after: revert;
break-after: unset;
break-afterの実例
それでは実際にbreak-after
プロパティの書き方を見ていきましょう。例えば、カラム分けされたコンテナの中に複数の段落を配置し、break-after
の値でカラム区切りを許可した場合と禁止した場合とで比較します。
表示確認
CSS
h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.column_box {
columns: 3;
width: 300px;
font-size: 14px;
}
.column_box > p {
padding-left: .3rem;
border-left: 2px solid #333;
}
#break_1 > p {
break-after: column;
}
#break_2 > p {
break-after: avoid-column;
}
HTML
<h2>break-after: column;</h2>
<section class="column_box" id="break_1">
<p>段落1:あいうえおかきくけこ。さしすせそたちつてと。</p>
<p>段落2:あいうえおかきくけこ。さしすせそたちつてと。</p>
<p>段落3:あいうえおかきくけこ。さしすせそたちつてと。</p>
</section>
<h2>break-after: avoid-column;</h2>
<section class="column_box" id="break_2">
<p>段落1:あいうえおかきくけこ。さしすせそたちつてと。</p>
<p>段落2:あいうえおかきくけこ。さしすせそたちつてと。</p>
<p>段落3:あいうえおかきくけこ。さしすせそたちつてと。</p>
</section>
break-afterに関連するCSSプロパティ
要素の表示や配置方法 | |
---|---|
bottom | 位置指定で配置された要素の底辺からの距離を指定する |
break-after | ボックスの終了時にページやカラムをどのように区切るかを指定する |
break-before | ボックスの開始前にページやカラムをどのように区切るかを指定する |
break-inside | ボックスの途中でページやカラムをどのように区切るかを指定する |
clear | フロート(float)の回り込みを解除する |
clip | 要素を切り抜いて可視化する範囲を指定する |
box-decoration-break | 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する |
display | 要素の表示形式を指定する |
float | 要素を右または左へ寄せて配置する |
image-orientation | 横向きや逆さまに撮影された写真を正しい向きに回転させる |
image-rendering | 画像を拡大縮小するアルゴリズムを設定する |
left | 位置指定で配置された要素の左辺からの距離を指定する |
object-fit | 画像や動画などの置換要素をボックスに収める方法を指定する |
object-position | ボックスの中に配置されるオブジェクトの位置を指定する |
overflow | 要素からはみ出した内容の表示方法をまとめて指定する |
overflow-wrap | インライン要素に対して溢れる単語の折り返し方法を指定する |
overflow-x | 要素から水平方向にはみ出す内容の表示方法を指定する |
overflow-y | 要素から垂直方向にはみ出す内容の表示方法を指定する |
position | 要素の位置指定の種類を変更する |
right | 位置指定で配置された要素の右辺からの距離を指定する |
vertical-align | インライン要素や表のセルに対して縦方向の揃える位置を指定する |
visibility | 要素の領域を残したまま表示・非表示を切り替える |
z-index | 要素の重なり順序を指定する |