text-emphasis（圏点） | CSS | ぱたぱたアニメ館

text-emphasis は、圏点（傍点）の種類や色、位置を指定する時に使います。テキストの強調したい部分に使用します。

Value（値）

none: 圏点なし
filled: 塗りつぶす
open: 中抜き（塗りつぶさない）
dot: 点。塗りつぶしは、U+2022「•」、中抜きはU+25E6「◦」で描画します。
circle: 丸。塗りつぶしは、U+25CF「●」、中抜きはU+25CB「○」で描画します。
double-circle: 二重丸。塗りつぶしは、U+25C9「◉」、中抜きはU+25CE「◎」で描画します。
triangle: 三角。塗りつぶしは、U+25B2「▲」、中抜きはU+25B3「△」で描画します。
sesame: ゴマ。塗りつぶしは、U+FE45「﹅」、中抜きはU+FE46「﹆」で描画します。
文字列: 圏点に使いたい１文字だけ指定（複数の文字列は指定しない）

※ filledとopenのどちらも指定しない場合、filledとなります。
※ filledとopenのどちらかを指定し、種類を指定しない場合、横書きではcircle、縦書きではsesameとなります。
※ 圏点は、対象となる要素のフォントサイズの50%に縮小されます。

カラーコードや色名で指定します。

text-emphasis-styleの値とtext-emphasis-colorの値を一括して指定します。

Value（値）

over: テキストの上横書きでの初期値
under: テキストの下
left: テキストの左
right: テキストの右縦書きでの初期値

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-emphasis-style: none; }
   p.test2 { text-emphasis-style: filled dot; }
   p.test3 { text-emphasis-style: filled circle; }
   p.test4 { text-emphasis-style: filled double-circle; }
   p.test5 { text-emphasis-style: filled triangle; }
   p.test6 { text-emphasis-style: filled sesame; }
   p.test7 { text-emphasis-style: open dot; }
   p.test8 { text-emphasis-style: open circle; }
   p.test9 { text-emphasis-style: open double-circle; }
   p.test10 { text-emphasis-style: open triangle; }
   p.test11 { text-emphasis-style: open sesame; }
   p.test12 { text-emphasis-style: "P"; }
   p.test13 { text-emphasis-color: #ff00ff; text-emphasis-style: filled double-circle; }
   p.test14 { text-emphasis: filled circle #6699ff; }
   p.test15 { text-emphasis: open triangle #ff0000; }
   p.test16 { text-emphasis-position: over; text-emphasis-style: filled circle; }
   p.test17 { text-emphasis-position: under; text-emphasis-style: filled circle; }
   p.test18 { text-emphasis-position: left; text-emphasis-style: filled circle; }
   p.test19 { text-emphasis-position: right; text-emphasis-style: filled circle; }
  </style>
 </head>
 <body>
   <p class="test1">奥の細道</p>
   <p class="test2～19">（同上）</p>
 </body>
</html>

display

圏点なし / text-emphasis-style: none;

奥の細道

圏点の種類（塗りつぶし） / text-emphasis-style: filled *;

奥の細道

圏点の種類（中抜き） / text-emphasis-style: open *;

奥の細道

圏点の種類（１文字） / text-emphasis-style: "P";

奥の細道

圏点の色（塗りつぶし二重丸） / text-emphasis-color

奥の細道

圏点の種類と塗りつぶしするかどうかと色をまとめて指定 / text-emphasis

奥の細道

圏点の位置（塗りつぶし丸） / text-emphasis-position

奥の細道

text-emphasis CSS3

「text-emphasis」の値

Value（値）

「text-emphasis-color」の値

「text-emphasis」の値

「text-emphasis-position」の値

Value（値）

HTML source

display