複数行のテキストに余白のある背景色をつける

2024年6月12日　　2025年4月18日

複数行にわたるインライン要素のテキストに余白付きの背景をつけると起きる問題

アイキャッチのようなデザイン、見ませんか？
今回はこのようなデザインをcssで再現する方法をご紹介します。

テキスト要素に背景をつけるとき、spanタグなどのインライン要素で付ける場合が多いと思いますが
インライン要素にpaddingを設定して背景色をつけて改行すると2行目以降にpaddingが効きません。

ブロック要素に背景を付けるとマーカーのようにテキストの後ろにのみ背景がつかないし…

インライン要素で余白ありの複数行を実現する場合
今までは、インラインブロック要素にして改行ごとにspanタグで囲んでいました。
が、これでは効率が悪いし改行位置が不確定の場合
デバイスによって意図しない位置で改行されてしまう場合もあります。

そんなときに使えるのがcssプロパティのbox-decoration-breakです。

box-decoration-breakは、要素の線、余白、背景が
改行や折り返しの際にどのように処理されるかを指定するために使用されます。
特に、要素が複数行にまたがる場合や、段落が分割される場合に役立ちます。

今回使用するのは、box-decoration-break: clone;です。
cloneはボックスの断片が一体化して処理されます。
背景やボーダーが行でシームレスに続いているように見え、各行が一つの連続した要素のように見えます。

背景画像を設定した箇所がわかりやすいですが、
行の開始から改行位置までで一つの要素になります。

モダンブラウザ（Chrome、Safari、Edge、Firefox）では基本OK！
Safariでは -webkit- が必要なので忘れずに！

装飾見出しや、コラムのタイトルなどにぴったりなので、ぜひ使ってみてください〜！