概要へ移動

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

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

なお、見た目のため、このページの実行結果には「下の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下記の３項目をまとめて指定
text-emphasis-style黒抜きfilled、白抜きopenなど
text-emphasis-position（日本語の場合、変更不要）
text-emphasis-color赤red、緑greenなど

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

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

text-emphasis

text-decorationやborderのように、他の詳細なプロパティ（ text-emphasis-style、text-emphasis-position、text-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

設定値は下表の設定値か、任意の１文字である。（下に「🍎」の例がある）

（表） 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;

}
細い点
黒抜き
白抜き

任意の１文字

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

CSS : すきな１文字
.filled  {

    -webkit-text-emphasis-style:    "🍎";

    text-emphasis-style:            "🍎";

}



.open  {

    -webkit-text-emphasis-style:    "🍋";

    text-emphasis-style:            "🍋";

}
１文字
黒抜き
白抜き

text-emphasis-position

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

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

まず、text-emphasis-styleとtext-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;