このページで解説するコードの実行結果。

適当な例
黒抜き
白抜き
任意の1文字
黒抜き
白抜き
縦と横
横書き
縦書き

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {
    min-width:          5em;           /*  最小幅 */
    font-size:          2em;           /*  文字の大きさ */
    color:              navy;          /*  文字の色 */
    display:            inline-block;  /*  横並び */
    vertical-align:     top;           /*  上揃え */
    width:              5em;           /*  幅 */        
    height:             5em;           /*  高さ */
}
.vertical-rl {
    writing-mode:       vertical-rl;    /*  縦書き */
}

概要

圏点(けんてん)とは強調のため、文字の上などに表示される点。傍点(ぼうてん)脇点(わきてん)とも呼ばれる。

プロパティ設定内容
text-emphasis下記の3項目をまとめて指定
text-emphasis-style黒抜きfilled、白抜きopenなど
text-emphasis-position(日本語の場合、変更不要)
text-emphasis-colorred、緑greenなど

CSS3で追加された新しいプロパティである。

※ Chromeに対応するには「-webkit-」のプレフィックスが必要である。

text-emphasis

text-decorationborderのように、他の詳細なプロパティ( text-emphasis-styletext-emphasis-positiontext-emphasis-color )を一括でまとめて指定するために使う。(それぞれの設定値は後述)

まず、text-emphasisの設定が無い場合の結果。

HTML : 適用するHTML
<div class="filled"  > 黒抜き</div>
<div class="open"    > 白抜き</div>
無指定
黒抜き
白抜き

適当な設定をしてみる。

CSS : auto
.filled {
    -webkit-text-emphasis: filled triangle      red;    
    text-emphasis:         filled triangle      red;    
}
.open   {
    -webkit-text-emphasis: open   double-circle green;
    text-emphasis:         open   double-circle green;
}
実行結果
黒抜き
白抜き

text-emphasis-style

設定値は下表の設定値か、任意の1文字である。(下に「🍎」の例がある)

(表) text-emphasis-styleの設定値
設定値種類デフォルト
noneなし
filled黒抜き
open白抜き
dot
circle
double-circle二重丸
triangle三角
sesame細い点

filled / open」+「dot / circle / double-circle / triangle / sesame」のような指定もできる。

none

CSS : none
.filled  {
    -webkit-text-emphasis-style:    none filled;
    text-emphasis-style:            none filled;
}
.open  {
    -webkit-text-emphasis-style:    none open;
    text-emphasis-style:            none open;
}
点なし
黒抜き
白抜き

dot

CSS : dot
.filled  {
    -webkit-text-emphasis-style:    dot filled;
    text-emphasis-style:            dot filled;
}
.open  {
    -webkit-text-emphasis-style:    dot open;
    text-emphasis-style:            dot open;
}
小さい点
黒抜き
白抜き

circle

CSS : circle
.filled  {
    -webkit-text-emphasis-style:    circle filled;
    text-emphasis-style:            circle filled;
}
.open  {
    -webkit-text-emphasis-style:    circle open;
    text-emphasis-style:            circle open;
}
黒抜き
白抜き

double-circle

CSS : double-circle
.filled  {
    -webkit-text-emphasis-style:    double-circle filled;
    text-emphasis-style:            double-circle filled;
}
.open  {
    -webkit-text-emphasis-style:    double-circle open;
    text-emphasis-style:            double-circle open;
}
二重丸
黒抜き
白抜き

triangle

CSS : triangle
.filled  {
    -webkit-text-emphasis-style:    triangle filled;
    text-emphasis-style:            triangle filled;
}
.open  {
    -webkit-text-emphasis-style:    triangle open;
    text-emphasis-style:            triangle open;
}
三角
黒抜き
白抜き

sesame

CSS : sesame
.filled  {
    -webkit-text-emphasis-style:    sesame filled;
    text-emphasis-style:            sesame filled;
}
.open  {
    -webkit-text-emphasis-style:    sesame open;
    text-emphasis-style:            sesame open;
}
細い点
黒抜き
白抜き

任意の1文字

すきな1文字を指定することもできる。ただし、""で囲むこと。

CSS : すきな1文字
.filled  {
    -webkit-text-emphasis-style:    "🍎";
    text-emphasis-style:            "🍎";
}
.open  {
    -webkit-text-emphasis-style:    "🍋";
    text-emphasis-style:            "🍋";
}
1文字
黒抜き
白抜き

text-emphasis-position

圏点をつける場所を指定する。デフォルトで日本語としてふさわしい場所に設定されているので、変更の必要はない。

(表) text-emphasis-positionの設定値
設定値場所デフォルト
over right上と右
over left上と左
under right下と右
under left下と左

まず、text-emphasis-styletext-emphasis-positionの設定が無い場合の結果。

HTML : 適用するHTML
<div class="sample"             > 横書き </div>
<div class="sample vertical-rl" > 縦書き </div>
無指定
横書き
縦書き

over right

CSS : over right
.sample  {
    -webkit-text-emphasis-style:    filled;
    -webkit-text-emphasis-position: over right;
    text-emphasis-style:            filled;
    text-emphasis-position:         over right;
}
上と右
横書き
縦書き

over left

CSS : over left
.sample  {
    -webkit-text-emphasis-style:    filled;
    -webkit-text-emphasis-position: over left;
    text-emphasis-style:            filled;
    text-emphasis-position:         over left;
}
上と左
横書き
縦書き

under right

CSS : under right
.sample  {
    -webkit-text-emphasis-style:    filled;
    -webkit-text-emphasis-position: under right;
    text-emphasis-style:            filled;
    text-emphasis-position:         under right;
}
下と右
横書き
縦書き

under left

CSS : under left
.sample  {
    -webkit-text-emphasis-style:    filled;
    -webkit-text-emphasis-position: under left;
    text-emphasis-style:            filled;
    text-emphasis-position:         under left;
}
下と左
横書き
縦書き

text-emphasis-color

カラーコードで指定する。

CSS : 色を変更
.filled  {
    -webkit-text-emphasis-style:    filled;
    -webkit-text-emphasis-color:    red;
    text-emphasis-style:            filled;
    text-emphasis-color:            red;
}
.open  {
    -webkit-text-emphasis-style:    open;
    -webkit-text-emphasis-color:    green;
    text-emphasis-style:            open;
    text-emphasis-color:            green;
}
実行結果
黒抜き
白抜き

Emmet : te

記述Visual Studio Code
tetext-emphasis: none;
tedtext-emphasis: dot;
tectext-emphasis: circle;