break-after CSS プロパティとは
トピック：複数列のレイアウト、ページングされたメディア、およびマルチリージョンのコンテキストでブレークさせることができる 具体的には、生成されたボックスの後にブレークが発生するかどうか、およびブレークのタイプを決定することができるbreak-beforeを使用して、生成されたボックスとブレークインの前にブレーク動作を決定し、生成されたボックス内のブレーク動作を判断することもできる
プロパティ break-after
基本 書式：セレクタ {break-after:値;}
実例 コード 1
サンプル コードを試す.multicol { background-color: beige ; padding: 10px; -webkit-column-count: 3 ; -webkit-column-rule: 2px dotted olivedrab; -moz-column-count: 3 ; -moz-column-rule: 2px dotted olivedrab; column-count: 3 ; column-rule: 2px dotted olivedrab; }.multicol hr { break-after: column ; }
プロパティ 定義と使用法
| デフォルト値・初期値 : | auto |
|---|
| 適用対象 : | ブロックレベル要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | paged |
|---|
| 計算値 : | 指定値 |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | break-before: auto|avoid|avoid-page|page|left|right|recto|verso|avoid-column|column|avoid-region|region; |
|---|
プロパティ値
| 値 | 説明 |
|---|
auto | プリンシプルボックスの後にページ/カラムブレークを強制したり、禁止したりすることを指定しません。 |
avoid | プリンシプルボックスの後にページ区切りを避けるように指定する |
avoid-page | 複数列要素の列の最適な幅を指定する |
page | プリンシパルボックスの後に常に改ページを強制するよう指定する |
page | プリンシパルボックスの後に常に改ページを強制するよう指定する |
left | プリンシパルボックスの後に1つまたは2つのページ区切りを強制して、次のページが左ページとしてフォーマットされるように指定する |
right | プリンシプルボックスの後に1つまたは2つのページ区切りを強制し、次のページが正しいページとしてフォーマットされるように指定する |
recto | プリンシパルボックスの後に1つまたは2つのページ区切りを強制して、次のページが左ページまたは右ページのいずれかの形式で表示されるように指定する |
verso | プリンシプルボックスの後に1つまたは2つのページ区切りを強制して、次のページが左ページまたは右ページのいずれかの形式で表示されるように指定する |
avoid-column | プリンシプルボックスの後のカラムブレークを避けるように指定する |
column | プリンシパルボックスの後に常にカラムブレークを強制することを指定する |
avoid-region | プリンシパルボックスの後にリージョンブレークを避けてください。 |
region | プリンシパルボックスの後に常にリージョンブレークを強制する |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
unset | この値は、プロパティが継承されるかどうかに応じて、inheritまたはのいずれかinitialとして機能します。つまり、すべてのプロパティを継承可能な場合は親の値に設定し、継承できない場合は初期値に設定する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| break-after | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯50 | フルサポート◯12 | サポートなし✖ | フルサポート◯10 | フルサポート◯37 | フルサポート◯10 |
|---|
column, avoid-column | サポートなし✖ | サポートなし✖ | サポートなし✖ | フルサポート◯10 | 未対応 11.1— 12.1 | サポートなし✖ |
|---|
recto, verso | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
region, avoid-region | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| break-after | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯50 | フルサポート◯50 | フルサポート◯あり | サポートなし✖ | 不明 | フルサポート◯10 | フルサポート◯5.0 |
|---|
column, avoid-column | サポートなし✖ | 不明 | サポートなし✖ | サポートなし✖ | 不明 | サポートなし✖ | サポートなし✖ |
|---|
recto, verso | サポートなし✖ | 不明 | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
region, avoid-region | サポートなし✖ | 不明 | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
CSS break-after | CSS プロパティ 値| 意味 使い方 実例 – WebRef