HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

テキスト エンファシス

text-emphasisプロパティ

テキストの圏点(文字の上に付ける点)について、色とスタイルを一括指定するプロパティです。

  • 初期値

    各プロパティに準拠

  • 継承

    不可

  • 適用できる要素

    全要素

このプロパティはtext-emphasis-styleプロパティtext-emphasis-colorプロパティをまとめて指定することができます。
印の表示位置を指定するtext-emphasis-colorプロパティは指定できないため、個別に指定する必要があります。

CSSコード例

p span {
	text-emphasis: triangle blue;
	-webkit-text-emphasis: triangle blue;
}
text-emphasisプロパティの使用例

Note

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

使用例

印のスタイル、色、表示位置を指定

text-emphasisプロパティtext-emphasis-positionプロパティを使って、印のスタイル、色、表示位置を指定します。
2018年12月現在、ChromeとOperaでこのプロパティを使用するにはベンダープレフィックス「-webkit-」を付けて指定する必要があります。

HTMLコード例

<p class="sample2">印の<span>スタイルと色</span>をまとめて指定する</p>

CSSコード例

.sample2 span {
	text-emphasis: circle #ccc;
	-webkit-text-emphasis: circle #ccc;
	text-emphasis-position: under left;
	-webkit-text-emphasis-position: under left;
}

印のスタイルと色はtext-emphasisプロパティで指定し、表示位置についてはtext-emphasis-positionプロパティから指定しています。

ブラウザの表示例

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

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

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