text-emphasis-styleプロパティの説明
CSSのtext-emphasis-styleプロパティは、テキストに付加する圏点、傍点、脇点の記号を指定します。圏点（けんてん）、傍点（ぼうてん）、脇点（わきてん）とは、日本語の文章で文字の強調を行うときに、文字の上や脇に付加する装飾的な点のことです。
圏点の色を変えるには、text-emphasis-colorを使用します。これらの値は、ショートハンド・プロパティのtext-emphasisで一括操作できます。
text-emphasis-styleに指定できる値
none- 圏点を表示しません。これが初期値です。
filled- 単色で塗りつぶさた記号を表すキーワードです。形状を表すキーワードと組み合わせて使用することもできます。
open- 中抜きの記号を表すキーワードです。形状を表すキーワードと組み合わせて使用することもできます。
dot- 小さな点の記号を表示します。
filled dotであれば "•"（U+2022）を、open dotであれば "◦"（U+25E6）となります。 circle- 大きな円の記号を表示します。
filled circleであれば "●"（U+25CF）を、open circleであれば "○"（U+25CB）となります。 double-circle- 二重丸の記号を表示します。
filled double-circleであれば "◉"（U+25C9）を、open double-circleであれば "◎"（U+25CE）となります。 triangle- 三角形の記号を表示します。
filled triangleであれば "▲"（U+25B2）を、open triangleであれば "△"（U+25B3）となります。 sesame- ゴマの記号を表示します。
filled sesameであれば "﹅"（U+FE45）を、open sesameであれば "﹆"（U+FE46）となります。 <string>- 圏点として表示させる記号を定義する値です。これを使用する場合は、単一の文字をクォーテーションで囲います。一文字以上は無効です。
text-emphasis-styleの使い方とサンプルコード
text-emphasis-styleプロパティの構文は以下の通りです。
/* 初期値 */
text-emphasis-style: none;
/* キーワード値 */
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: filled circle;
text-emphasis-style: open triangle;
/* <string>値 */
text-emphasis-style: '＊';
text-emphasis-style: '＠';
text-emphasis-style: '\2605';
/* グローバル値 */
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: revert;
text-emphasis-style: unset;
text-emphasis-styleの実例
それでは実際にtext-emphasis-styleプロパティの書き方を見ていきましょう。以下の例は、段落の中の特定の文字列に対して圏点を付加した時の表示です。
ここでは、text-emphasis-styleとtext-emphasis-colorを分けて表記していますが、一般的にはtext-emphasisを使う場面の方が多いでしょう。
<div class="samp_box">
<section>
<p>圏点を<span class="te_1">重要な部分</span>に表示します。</p>
<div>
text-emphasis-style: filled;<br>
text-emphasis-color: black;<br>
</div>
</section>
<section>
<p>圏点を<span class="te_2">重要な部分</span>に表示します。</p>
<div>
text-emphasis-style: open double-circle;<br>
text-emphasis-color: #03a;<br>
</div>
</section>
<section>
<p>圏点を<span class="te_3">重要な部分</span>に表示します。</p>
<div>
text-emphasis-style: filled sesame;<br>
text-emphasis-color: rgb(255, 0, 0);<br>
</div>
</section>
<section>
<p>圏点を<span class="te_4">重要な部分</span>に表示します。</p>
<div>
text-emphasis-style: '★';<br>
text-emphasis-color: hsl(330, 100%, 63%);<br>
</div>
</section>
</div>
.samp_box {
overflow: auto;
padding: 1rem;
background: #eee;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.samp_box > section {
overflow: auto;
padding: 0 1rem 1rem;
background: #fff;
}
section > p {
margin: 1rem 0 0;
}
section > div {
margin: .5rem 0 0;
font-size: 0.875rem;
}
.te_1 {
text-emphasis-style: filled;
text-emphasis-color: black;
}
.te_2 {
text-emphasis-style: open double-circle;
text-emphasis-color: #03a;
}
.te_3 {
text-emphasis-style: filled sesame;
text-emphasis-color: rgb(255, 0, 0);
}
.te_4 {
text-emphasis-style: '★';
text-emphasis-color: hsl(330, 100%, 63%);
}
縦書きの文章に圏点を表示させる
小説のような縦書きの文書で圏点はよく使われます。それをウェブページで再現するには、いくつかのCSSプロパティを記述する必要があります。詳しい内容はtext-emphasisで解説します。ページ下部の縦書き形式のサンプルを参照してください。