定義と使用方

text-emphasis-styleプロパティは
要素のテキストに対する強調表示のスタイルを指定します。

このプロパティを使用すると、サポートされているさまざまな値の中から任意のテキスト強調表示スタイルを設定できます。

基本の例

CSSライブデモ：text-emphasis-style デモボタンをクリックしてみてください。

参考事項：関連プロパティ

text-emphasis-styleプロパティによる強調表示のスタイル指定以外にも、テキストの強調表示に関連するプロパティがあります。これらのプロパティと組み合わせて使用することで、テキストの強調表示をより多様にスタイリングできます。

text-emphasis-styleの関連プロパティ
text-emphasis-color 強調表示の色を設定します。
text-emphasis 強調表示のスタイルと色を一度に設定できるショートハンドプロパティです。
text-emphasis-position 強調表示の位置を設定します。

形式の構文

CSS 
selector {
    text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | [ '커스텀 문자' ]
}

値

text-emphasis-styleプロパティで使用する値の意味は以下の通りです。

text-emphasis-styleプロパティの値
none テキストに強調表示を適用しません。
filled テキストに塗りつぶしの強調表示を適用します。
open テキストに空の強調表示を適用します。
dot テキストの周囲に点（dot）で強調表示を適用します。
circle テキストの周囲に丸（circle）で強調表示を適用します。
double-circle テキストの周囲に二重丸（double circle）で強調表示を適用します。
triangle テキストの周囲に三角形（triangle）で強調表示を適用します。
sesame テキストの周囲にゴマ（sesame）で強調表示を適用します。
「カスタム文字」 テキストの周囲に指定した文字で強調表示を適用します。文字を2つ以上指定した場合は、最初の文字のみが表示されます。

テキストの強調表示の適用範囲

text-emphasis-styleプロパティは、各テキスト文字に対して強調マークを1回ずつ描画します。ただし、次の文字には強調表示が描画されません。

  • 空白：単語を区切るための空白文字には強調表示が適用されません。
  • 制御文字：テキストの流れを制御する特殊文字（例：改行、タブなど）にも強調表示は適用されません。
  • 句読点：一部の句読点文字にも強調マークは描画されません。例えば、#、%、@、&などが該当します。

ご注意ください！
仕様書では、将来的にテキストへの強調表示の適用範囲に関する追加の可能性があると記載されています。

構文

CSS 
/* キーワード値 /
text-emphasis-style: none; / テキストに強調表示スタイルを適用しません。 /
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: sesame;
text-emphasis-style: open sesame;
text-emphasis-style: sesame open; / 左右の順序は関係なし。=> open sesameと同じ */

/* 'カスタム文字' /
text-emphasis-style: 'K';
text-emphasis-style: 'k'; / 大文字・小文字は区別されます /
text-emphasis-style: "K"; / ダブルクォートでも同じ /
text-emphasis-style: 'Key'; / 文字を2つ以上指定した場合は最初の文字のみ表示されます。=> Kのみ表示 /
text-emphasis-style: '';
text-emphasis-style: '\00A9'; /* CSSエンティティ使用可能 => ©として表示 /
text-emphasis-style: '&'; / HTMLエンティティ使用可能 => &として表示 */

/* グローバル値 */
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: unset;
text-emphasis-style: revert;
text-emphasis-style: revert-layer;

形式の定義

text-emphasis-styleプロパティの形式定義
初期値 none
適用対象要素 すべての要素
継承 はい
アニメーション いいえ

参考：text-emphasis-styleのサイズ
仕様書によると、text-emphasis-styleプロパティで表示される記号は、該当要素のフォント設定のfont-sizeの50％に縮小したサイズで表示されます。

例

キーワード値

CSS 
p span {
    text-emphasis-style: triangle;
}
HTML 
<p>テキストに<span>強調表示</span>があります。</p>
実際の適用例

「カスタム文字」

CSS 
p span {
    text-emphasis-style: 'A';
    font-size: 1.5em;
}
HTML 
<p>テキストに<span>強調表示</span>があります。</p>
実際の適用例

filledまたはopenの値のみを指定する場合

filledまたはopenの値のみを指定する場合、横書きモードと縦書きモードで表示方法が異なります。

横書きモード
CSS - 横書きモード 
p span {
    text-emphasis-style: open; /* text-emphasis-style: open dot;と同じ */
    font-size: 1.5em;
}
HTML 
<p>テキストに<span>強調表示</span>があります。</p>
実際の適用例 text-emphasis-style: open dot;と同じように表示されます。

上記の例のように、横書きモードでopenの値のみを指定した場合、text-emphasis-style: open dot;と同じように表示されます。もしfilledの値のみを指定した場合は、text-emphasis-style: filled dot;と同じように表示されます。

縦書きモード

以下の例のように、縦書きモードでopenの値のみを指定した場合、text-emphasis-style: open sesame;と同じように表示されます。もしfilledの値のみを指定した場合は、text-emphasis-style: filled sesame;と同じように表示されます。

CSS - 縦書きモード 
p span {
    writing-mode: vertical-rl; /* 縦書きモード */
    text-emphasis-style: open; /* text-emphasis-style: open sesame;と同じ */
    font-size: 1.5em;
}
HTML 
<p>テキストに<span>強調表示</span>があります。</p>
実際の適用例 text-emphasis-style: open sesame;と同じように表示されます。

注意点

text-emphasis-styleプロパティは視覚的には強調効果を提供しますが、支援技術（スクリーンリーダーなど）には伝わらない場合があります。アクセシビリティを向上させるためには、状況に応じて意味を持つHTMLタグ（例：<strong>、<em>など）やrole属性の使用を検討してください。

ブラウザ互換性

text-emphasis-styleプロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
text-emphasis-style 99 99 46 7

仕様書

text-emphasis-styleプロパティに関する仕様書
仕様書
text-emphasis-style CSS Text Decoration Module Level 4
#text-emphasis-style-property

参考資料

関連項目