HTML & CSS

リファレンス

CSS

テキスト エンファシス スタイル

text-emphasis-styleプロパティ

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

  • 初期値

    none

  • 継承

    不可

  • 適用できる要素

    全要素

次の値を指定することができます。なお、任意の文字以外であれば、塗り方については「filled(初期値)」、または「open」の2種類から指定することが可能です。

  • dot – ドット(小さい丸)
  • circle – 丸
  • double-circle – 二重丸
  • triangle – 三角
  • sesame – ゴマ
  • 任意のテキスト – 「(シングルクォーテーション)」で囲ったテキスト

テキストの強調したい箇所に指定すると、次のようにテキストの上部に印が表示されます。

ブラウザの表示例

Note

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

使用例

次のように様々な印を表示することができます。

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>
<p class="sample5">表示サンプル<span>その5</span></p>
<p class="sample6">表示サンプル<span>その6</span></p>
<p class="sample7">表示サンプル<span>その7</span></p>
<p class="sample8">表示サンプル<span>その8</span></p>
<p class="sample9">表示サンプル<span>その9</span></p>
<p class="sample10">表示サンプル<span>その10</span></p>
<p class="sample11">表示サンプル<span>その11</span></p>

CSSコード例

.sample1 span {
	text-emphasis-style: dot;
	-webkit-text-emphasis-style: dot;
}
.sample2 span {
	text-emphasis-style: dot open;
	-webkit-text-emphasis-style: dot open;
}
.sample3 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
}
.sample4 span {
	text-emphasis-style: circle open;
	-webkit-text-emphasis-style: circle open;
}
.sample5 span {
	text-emphasis-style: double-circle;
	-webkit-text-emphasis-style: double-circle;
}
.sample6 span {
	text-emphasis-style: double-circle open;
	-webkit-text-emphasis-style: double-circle open;
}
.sample7 span {
	text-emphasis-style: triangle;
	-webkit-text-emphasis-style: triangle;
}
.sample8 span {
	text-emphasis-style: triangle open;
	-webkit-text-emphasis-style: triangle open;
}
.sample9 span {
	text-emphasis-style: sesame;
	-webkit-text-emphasis-style: sesame;
}
.sample10 span {
	text-emphasis-style: sesame open;
	-webkit-text-emphasis-style: sesame open;
}
.sample11 span {
	text-emphasis-style: '♥';
	-webkit-text-emphasis-style: '♥';
}
各設定のブラウザ表示例

印の塗り方には黒塗りの「filled」か、白抜きの「open」のいずれかを指定することができます。
5種類の印と、2種類の塗り方で計10種類が用意されています。

それ以外の記号を使用したい場合は、最後の「.sample11」のように任意の記号や文字を指定して表示することも可能です。

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

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

ありがとうございます。
コメントを送信しました。