text-emphasis-style:テキストに付加する圏点、傍点、脇点の記号を指定する

初期値 none
適用対象 全ての要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

text-emphasis-styleプロパティの説明

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プロパティの構文は以下の通りです。

CSS
/* 初期値 */
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-styletext-emphasis-colorを分けて表記していますが、一般的にはtext-emphasisを使う場面の方が多いでしょう。

表示確認
CSS
.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%);
}
HTML
<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>

縦書きの文章に圏点を表示させる

小説のような縦書きの文書で圏点はよく使われます。それをウェブページで再現するには、いくつかのCSSプロパティを記述する必要があります。詳しい内容はtext-emphasisで解説します。ページ下部の縦書き形式のサンプルを参照して下さい。

text-emphasis-styleに関連するCSSプロパティ

テキスト関連
text-align ボックスに含まれる内容の横位置の揃え方を指定する
text-align-last ボックスに含まれる内容の最後の行を揃える位置を指定する
text-combine-upright 一文字分の空間に挿入する文字の組み合わせを指定する
text-decoration 文字の装飾線に関する値を一括で指定する
text-decoration-color 文字に加えられた装飾線の色を指定する
text-decoration-line 文字に加えられた装飾線の種類を指定する
text-decoration-skip-ink 装飾線が文字を通過する祭の処理を指定する
text-decoration-style 文字に加えられた装飾線の形状を指定する
text-decoration-thickness 文字に加えられた装飾線の太さを指定する
text-emphasis テキストに付加する圏点、傍点、脇点に関する値を一括で指定する
text-emphasis-color テキストに付加する圏点、傍点、脇点の色を指定する
text-emphasis-position テキストに付加する圏点、傍点、脇点の位置を指定する
text-emphasis-style テキストに付加する圏点、傍点、脇点の記号を指定する
text-indent テキストの一行目に挿入するインデントの幅を指定する
text-justify テキストの行端揃えに対して均等割り付けの方法を指定する
text-orientation 縦書きモードの文字の向きを指定する
text-overflow 行からテキストが溢れている状態の表現方法を指定する
text-shadow 文字に影(ドロップシャドウ)を付ける
text-transform テキストの大文字・小文字の表記を指定する
text-underline-position 文字の下に引かれる装飾線の位置を指定する