CSSで複数行の見出しに余白つきの背景色をつける

更新日 : 2021.04.04

Share
写真の上に見出しをのせると写真によってはテキストが読みにくくなることがあるので、テキストに背景色をつけて見やすくすることがあります。display: inlineで表現は可能でしたが、行ごとの余白がつけられないのでデザインによっては問題となることも。そこでbox-decoration-break: cloneを使用して余白調整ができるようにします。

デモとコード

Design is fun.
Design is difficult.

h2 {
	box-decoration-break: clone;	
	-webkit-box-decoration-break: clone;
	display: inline;
	padding: .3em;
	line-height: 2.5;
	background-color: #e3bf00;
}

box-decoration-breakで、ボックスが改行する時の表示を指定することができます。cloneで分割されたボックスごとに背景や余白、borderを指定できるようになります。

ブラウザ対応

CSSで複数行の見出しに余白つきの背景色をつけるブラウザ対応の画像Can I use…

Firefox以外のモダンブラウザはベンダープレフィックス-webkit-が必要です。
IEは対応していないので余白なしの背景色となります。対応させる場合にはPolyfillを使用します。

人気記事

  1. Chrome拡張機能を見直してみた

    便利なChrome拡張機能を見直してみた

  2. ジュンク堂書店池袋本店の選書フェア

    ジュンク堂書店池袋本店の選書フェアで選んだ34冊の中から9冊を紹介してみる

  3. 著書「現場で使えるWebデザインアイデアレシピ」を執筆しましたの画像

    著書「現場で使えるWebデザインアイデアレシピ」を執筆しました

  4. 2022年版 Web制作が捗るChrome拡張機能14選

    2022年版 Web制作が捗るChrome拡張機能14選

  5. 2021年を振り返る!Web制作関連の人気記事をあつめてみた