break-inside CSS プロパティとは
トピック：複数列のレイアウト、ページングされたメディア、およびマルチリージョンのコンテキストでの不要なブレークを防ぐ事ができる たとえば、複数列のレイアウトを扱う場合、順序付きリストを1つの列に表示することをお勧めする(リストの途中で次の列に移動するのではなく)。 この場合、break-insideプロパティを使用して、この不要なブレークを回避できる
プロパティ break-inside
基本 書式：セレクタ {break-inside:値;}
実例 コード 1
サンプル コードを試す.multicol { background-color: lightyellow ; padding: 10px; -webkit-column-count: 3 ; -webkit-column-rule: 2px dotted coral; -moz-column-count: 3 ; -moz-column-rule: 2px dotted coral; column-count: 3 ; column-rule: 2px dotted coral; }.multicol ul { break-inside: avoid ; }
プロパティ 定義と使用法
| デフォルト値・初期値 : | auto |
|---|
| 適用対象 : | ブロックレベル要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | paged |
|---|
| 計算値 : | 指定値 |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | break-inside: auto|avoid|avoid-page|avoid-column; |
|---|
プロパティ値
| 値 | 説明 |
|---|
auto | プリンシプルボックスの後にページ/カラムブレークを強制したり、禁止したりすることを指定しません。 |
avoid | プリンシプルボックスの後にページ区切りを避けるように指定する |
avoid-page | 複数列要素の列の最適な幅を指定する |
avoid-column | プリンシプルボックスの後のカラムブレークを避けるように指定する |
avoid-region | プリンシパルボックスの後にリージョンブレークを避けてください。 |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
unset | この値は、プロパティが継承されるかどうかに応じて、inheritまたはのいずれかinitialとして機能します。つまり、すべてのプロパティを継承可能な場合は親の値に設定し、継承できない場合は初期値に設定する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| break-inside | 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-inside | 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-inside | CSS プロパティ 値| 意味 使い方 実例 – WebRef