box-decoration-break:要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
初期値 | slice |
適用対象 | 全ての要素 |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
box-decoration-breakプロパティの説明
box-decoration-break
は、要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定します。例えば、境界線や背景色を持つインライン要素が、改行やページ送りによって断片化した時に、装飾の表示の仕方を制御できます。
要素が分割されてレンダリングされた時の各部分を「フラグメント」と呼びます。これは印刷時に要素がページ区切りにまたがる場合や、インラインボックスが複数の行に折り返された場合に発生します。
box-decoration-breakに指定できる値
- slice
- フラグメントが発生した場合、ボックスは通常通り装飾の描画を行い、断片化した部分は切断されたように見えます。インラインレベルで分割された場合は、各行の高さを保持したまま改行や折り返しが行われ、ブロックレベルで分割された場合は、各要素の幅に従い装飾が複製されます。
- clone
- フラグメントが発生した場合、ボックスは装飾の切れ目を補う形で描画を行い、要素の断面は各プロパティの値に応じて要素の終端であるかのように処理します。
border-radius
、border-image
、box-shadow
、そして背景色や背景画像も、それぞれの断片に対して個別に適用されます。background-repeat
の値がno-repeat
であれば、その都度繰り返されます。
box-decoration-breakの使い方とサンプル
box-decoration-break
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
box-decoration-break: slice;
box-decoration-break: clone;
/* グローバル値 */
box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: revert;
box-decoration-break: unset;
box-decoration-breakの実例
それでは実際にbox-decoration-break
プロパティの書き方を見ていきましょう。以下の例は、インラインレベルの要素内で改行を行った時の挙動を示しています。特定のブラウザで機能しない場合は、対応するベンダープレフィックスを追加して下さい。
表示確認
CSS
.samp_box {
padding: 0 1rem 1rem 1rem;
line-height: 2;
}
.samp_box > p {
margin: 1rem auto 0;
}
.style {
padding: .2rem;
border: 1px solid #c16;
border-radius: 10px;
background: linear-gradient(#fff, #fae);
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
#slice {
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
}
#clone {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
HTML
<section class="samp_box">
<p>box-decoration-break: slice;</p>
<span class="style" id="slice">
あいうえおかきくけこ<br>0123456789<br>あいうえお<br>かきくけこ01234<br>56789
</span>
<p>box-decoration-break: clone;</p>
<span class="style" id="clone">
あいうえおかきくけこ<br>0123456789<br>あいうえお<br>かきくけこ01234<br>56789
</span>
</section>
このように、要素の装飾を自動的に補完してくれることはありがたいのですが、文章の途中であたかも装飾の先頭のような見栄えである事は、印刷物でページ送りが発生した場合などで、逆に読者の認識を阻害するかもしれません。
続いて、ブロックレベル要素の挙動を確認します。通常、ブロックレベル要素は縦や横に引き伸ばされるため、断片化することはありませんが、特定の条件下でフラグメントが発生することがあります。
この場合、要素はボックスの機能を維持したまま切断されます。境界線や背景の描画のされ方に注目して下さい。ただし、対応していないブラウザではベンダープレフィックスを併記しても機能しません。
表示確認
CSS
.column_box {
columns: 2;
width: 20rem;
padding: 0 1rem 1rem 1rem;
}
.style {
border: 1px solid #c16;
border-radius: 10px;
background: linear-gradient(#fff, #fae);
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
#slice {
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
}
#clone {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
HTML
<p>box-decoration-break: slice;</p>
<section class="column_box">
<div class="style" id="slice">
あいうえおかきくけこ0123456789あいうえおかきくけこ0123456789
</div>
</section>
<p>box-decoration-break: clone;</p>
<section class="column_box">
<div class="style" id="clone">
あいうえおかきくけこ0123456789あいうえおかきくけこ0123456789
</div>
</section>
box-decoration-breakに関連する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 | 要素の重なり順序を指定する |