text-emphasis-styleで傍点のスタイルと形を指定【CSS】

text-emphasis-styleは文字につける傍点のスタイルや形を指定するプロパティです。

{text-emphasis-style: スタイル形;}

傍点とは、その語句に注意を向けさせるために上部などにつける印のようなもので、text-emphasis-styleプロパティを使ってスタイルだったり、形だったりを指定できるんです。

text-emphasis-styleのスタイル

text-emphasis-styleプロパティでは、傍点を塗りつぶしで表すのか白抜きで表すのかなど、傍点のスタイルを以下の値で指定できます。

none

noneは傍点を表示しません。

filled

filledを指定すると、塗りつぶしの傍点が表示されます。

塗りつぶしの小さな円の傍点
塗りつぶしの大きな円の傍点
塗りつぶしの二重円の傍点
塗りつぶしの三角点の傍点
塗りつぶしのゴマ形の傍点

open

openを指定すると、白抜きの傍点が表示されます。

白抜きの小さな円の傍点
白抜きの大きな円の傍点
白抜きの二重円の傍点
白抜きの三角点の傍点
白抜きのゴマ形の傍点

任意の文字

任意の文字を傍点として指定することもでき、指定したい文字は引用符（””）で囲って記述します。

text-emphasis-styleの形

text-emphasis-styleプロパティではスタイルだけでなく、丸か三角かなど、傍点の形も指定できます。

dot

dotを指定すると、傍点が小さな円で表示されます。

塗りつぶしの小さな円の傍点
白抜きの小さな円の傍点

circle

circleを指定すると、傍点が大きな円で表示されます。

塗りつぶしの大きな円の傍点
白抜きの大きな円の傍点

double-circle

double-circleを指定すると、傍点が二重丸で表示されます。

塗りつぶしの二重円の傍点
白抜きの二重円の傍点

triangle

triangleを指定すると、傍点が三角点で表示されます。

塗りつぶしの三角点の傍点
白抜きの三角点の傍点

sesame

sesameを指定すると、傍点がゴマの形で表示されます。

塗りつぶしのゴマ形の傍点
白抜きのゴマ形の傍点

text-emphasis-styleプロパティまとめ

text-emphasis-styleプロパティで指定できるスタイルや形をまとめると以下のような感じです。

	filled	open
dot	塗りつぶし小さな円	白抜き小さな円
circle	塗りつぶし大きな円	白抜き大きな円
double-circle	塗りつぶし二重円	白抜き二重円
triangle	塗りつぶし三角点	白抜き三角点
sesame	塗りつぶしゴマ形	白抜きゴマ形