【CSS】box-decoration-breakでテキストの背景を表現する

こんにちは、今回はCSSでテキストの背景を表現する際に役立つテクニックを紹介したいと思います。

今までにテキストに背景を敷く際に困ったことはありませんか？改行する際の処理とかで上手くいかないってことありますよね。

そんな時に役立つプロパティが「box-decoration-break」となります。

まずはDEMOをご覧ください。

→DEMO

普通にテキスト全体をspanなどで囲って背景を付けるとDEMOの上の状態になってしまいます。改行されてしまうと若干崩れてしまいますよね。

そこでこのプロパティを用いるとDEMOの下のように改行してもキレイに表現することが可能です。

使用する際の注意点として、ベンダープレフィックスが必要となるブラウザが多いのでご注意ください。

対応ブラウザについては以下をご参考下さい。

→Can I use…

Chrome、Edge、Safariなどは-webkit-を付けて書かないと対応できません。なのでしっかり対応してあげましょう。

ではDEMOのソースを記載します。HTMLの該当部分は以下になります。

■HTML

HTMLについては特に解説することは無いと思います。本題のCSSは以下のように記述しています。

■CSS

「box-decoration-break」というプロパティはボックスが改行する際の表示形式を指定するプロパティで、この値をcloneとすることで別ボックスとして表現することができます。

もしこのプロパティを知らないと、行ごとにspanで囲って…brで改行して…みたいな形で無理やり表現することになってしまうかと思います。知っているのと知らないのでは随分違いますね。

以前にも似たようなことを書いていますが、やり方に疑問を持ったりしたときにはまず調べてみるといいでしょう。大体楽にできる方法があるはずです。

今後もこういう便利プロパティが使えるようになっていって欲しいですね。

以上、クリエイターブログでした。