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

更新日 : 2021.04.04

Share
0
1
0
写真の上に見出しをのせると写真によってはテキストが読みにくくなることがあるので、テキストに背景色をつけて見やすくすることがあります。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. いざという時に使える13のHTML&CSS Tips集の画像

    いざという時に使える13のHTML&CSS Tips集

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

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

  4. 見出しをおしゃれにする英字フォントの画像

    【無料】見出しをおしゃれにする英字フォントを19個集めてみた

  5. 見出しに使えるfit-contentを解説してみる