Web制作のティップスまとめ。たまにはコラムも

  1. メモルカ
  2. Web制作
  3. 【CSS】地味に厄介な「背景色付きテキスト(横幅追従・paddingあり)」のコーディング方法

【CSS】地味に厄介な「背景色付きテキスト(横幅追従・paddingあり)」のコーディング方法

【CSS】地味に厄介な「背景色付きテキスト」のコーディング方法

このアイキャッチ画像のように「テキスト量に追従して、行ごとに背景色が付く」デザインってありますよね。画像に乗っかるテキストの可読性を上げる手法です。

しかし一見単純なこのデザイン。コーディングで再現するには色々と条件が重なり地味に厄介。…というかモダンCSSを使わないと実は困難です。

結論から言うとbox-decoration-breakプロパティを使って解決します。

ここにテキストが入ります
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

	<h2>
		ここにテキストが入ります<br>
		ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
	</h2>
h2{
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;

	/* 以降の設定はデザインに合わせて調整 */
	font-size: 24px;
	font-weight: 700;
	padding: .4em .8em;
	line-height: 2.8;
	background: rgba(255, 255, 255, .8);          
}

単純にインライン要素だけでは何故ダメなのか

まず求められている仕様を確認します。

  • テキストの背景に色をつける。背景は横100%の長さではなく、テキスト量に追従する
  • テキストの上下左右に余白(padding)をつける
  • 行ごとにも余白(margin or line-height)をつける
  • テキストの文字数及び行数。そして改行(折返し)されるタイミングは不確定とする

背景色は横100%ではなく、テキスト量に追従する。つまりテキストはブロック要素ではなくインライン要素である必要があります。では単純にインライン要素で囲って色を付けてみましょう。

NG例 その1

ここにテキストが入ります
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h2{
	display: inline;

	/* 以降の設定はデザインに合わせて調整 */
	font-size: 24px;
	font-weight: 700;
	padding: .4em .8em;
	line-height: 2.8;
	background: rgba(255, 255, 255, .8);          
}

ぱっと見では上手くいっていますが、テキストの余白部分であるpaddingが期待している結果と異なりますよね。前後のpaddingは要素の始点と終点にしか効かないので折返しの改行地点には適用されていません。

手動で1行ずつインライン要素で囲むと?

ではテキスト部分を1行ずつspanで囲み、それを装飾すれば……。これならばデザイン自体は再現出来ます。

しかしこの手法だとテキスト量に合わせて行毎にタグの調整が必要で、コンポーネントとしての汎用性が低すぎます。決め打ちの原稿箇所にしか使えません。それも内容が変更されたら都度調整が必要です。面倒くさすぎる。

NG例 その2

ここにテキストが入ります
ここにテキストが入りますここにテキストが入りますここに
テキストが入ります。
<h2>
	<span>ここにテキストが入ります</span><br>
	<span>ここにテキストが入りますここにテキストが入りますここに</span><br>
	<span>テキストが入ります。</span>
</h2>
h2 span{
	/* 以下、例1と同様につき省略 */      
}

力技で1行ずつ対応したパターン。保守性も悪い上、行端での折返しではなく、改行には必ずbrを利用する仕様上、端末の横幅によっては意図しないタイミングで改行されてしまう可能性が。特にスマホ。

そもそもこの手のデサインは見出し部分によく使われるもの。例を挙げるなら先方がCMSから入力したテキストをページタイトルとして自動挿入するパターン

そうなると一番の理想はテキストをただ流し込んだだけで反映されるCSSです。

box-decoration-breakを使って解決

こういう時はbox-decoration-break: clone;が便利。
あまりメジャーなプロパティではありませんが、要素が改行した際の表示形式を指定する事が出来ます。

ここにテキストが入ります
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

<h2>
	ここにテキストが入ります<br>
	ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
</h2>
h2{
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;

	/* 以降の設定はデザインに合わせて調整 */
	font-size: 24px;
	font-weight: 700;
	padding: .4em .8em;
	line-height: 2.8;
	background: rgba(255, 255, 255, .8);          
}

実はわりと昔からあるプロパティですが、2023年現在でも主要ブラウザにはベンダープレフィックスが必要なのでそこだけは注意が必要です。

Data on support for the css-boxdecorationbreak feature across the major browsers from caniuse.com

https://caniuse.com/css-boxdecorationbreak

以上。地味に厄介な「背景色付きテキスト」のコーディング方法でした。

このプロパティを知るまでは、なかなか妙案がありませんでしたが、これでもう恐れる必要はありませんね。

上に戻る