CSS | テキストの背景色を変更する方法

2022-01-22CSS テキスト,CSS

CSSでテキストの背景色を変更する簡単な方法と表示サンプルを紹介しています。

テキストの背景色を変更する

テキストの背景色を変更する表示サンプルとHTML・CSSのサンプルコードになります。

See the Pen CSS | Change the style of selected text by yochans (@yochans) on CodePen.

HTMLには背景色を変更する対象のテキストをpタグ、class名を「.text」として指定しています。

<p class="text">Change the background color of the text</p>

テキストの背景色は通常の要素と同じく「background-color」プロパティが利用可能です。

WEBカラーネーム、HEXカラーコード、RGB、RGBAでの指定ができます。
サンプルではロイヤルブルー（royalblue、#4169e1）を指定しています。

「margin」を指定した場合は背景色の外側に余白が付き、「padding」を指定した場合は背景色の内側に余白が入ります。

.text {
	padding: 10px;
	background-color: #4169e1;
	color: #FFF;
}