HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

テキスト エンファシス カラー

text-emphasis-colorプロパティ

テキストの圏点(文字の上に付ける点)の色を指定するプロパティです。

  • 初期値

    currentColor

  • 継承

    不可

  • 適用できる要素

    全要素

text-emphasisプロパティでテキストの強調したい部分に印を表示する場合、text-emphasis-colorプロパティで印の色を設定することができます。

色の指定方法については、カラーネーム、カラーコード、rgbaで指定します。
CSSの色の指定方法については、「CSSでの色の指定方法について」をご覧ください。

text-emphasis-colorプロパティの表示例

Note

このプロパティは2018年12月現在、IE11とEdgeは対応していません。

使用例

text-emphasis-styleプロパティで指定した印に対し、text-emphasis-colorプロパティで色を指定していきます。
2018年12月現在、ChromeとOperaでこのプロパティを使用するにはベンダープレフィックス「-webkit-」を付けて指定する必要があります。

HTMLコード例

<p class="sample1">表示サンプル<span>その1</span></p>
<p class="sample2">表示サンプル<span>その2</span></p>
<p class="sample3">表示サンプル<span>その3</span></p>
<p class="sample4">表示サンプル<span>その4</span></p>

CSSコード例

/* 色指定なし(初期値) */
.sample1 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
}
.sample2 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
	text-emphasis-color: red;
	-webkit-text-emphasis-color: red;
}
.sample3 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
	text-emphasis-color: #2484bf;
	-webkit-text-emphasis-color: #2484bf;
}
.sample4 span {
	text-emphasis-style: "♥";
	-webkit-text-emphasis-style: "♥";
	text-emphasis-color: rgba( 90, 189, 248, 1.0);
	-webkit-text-emphasis-color: rgba( 90, 189, 248, 1.0);
}
ブラウザの表示例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。