CSS text-emphasisプロパティ：テキスト強調マークのショートハンド

定義と使用方

text-emphasisプロパティは
要素のテキストに対する強調表示の形状と色を指定します。

このプロパティは、要素のテキストに強調表示の形状を指定するtext-emphasis-styleと、色を指定するtext-emphasis-colorを一度に指定できるショートハンドプロパティです。

基本の例

形式の構文

CSS

selector {
    text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>
    /*  
        この値は
        text-emphasis-style、
        text-emphasis-colorプロパティの値です。
        指定するプロパティ値の順序は関係ありません。
        指定しない（省略した）プロパティの値には初期値が適用されます。
    */
}

構文

CSS

/* 初期値 */
text-emphasis: none; /* テキストに強調表示スタイルを適用しない */

/* キーワード値 */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: dot;
text-emphasis: circle;
text-emphasis: double-circle;
text-emphasis: triangle;
text-emphasis: sesame;
text-emphasis: open sesame;
text-emphasis: sesame open; /* 左右の順序は関係なし => open sesameと同じ */

/* 'カスタム文字' */
text-emphasis: 'K';
text-emphasis: 'k'; /* 大文字・小文字を区別 */
text-emphasis: "K"; /* ダブルクォーテーションでも可 */
text-emphasis: 'Key'; /* 複数文字を使用した場合は先頭の1文字のみが表示される => Kのみ表示 */
text-emphasis: '*';
text-emphasis: '\00A9'; /* CSSエンティティの使用可能 => ©として表示 */
text-emphasis: '&amp;'; /* HTMLエンティティの使用可能 => &として表示 */

/* キーワード値と色の値 */
text-emphasis: open sesame red;
text-emphasis: filled sesame #00a0e9;

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

値

text-emphasisプロパティは、1つ以上の空白で区切られた値を指定し、その値はtext-emphasis-styleおよびtext-emphasis-colorプロパティの値です。指定する値の順序は関係ありません。

text-emphasisプロパティの値
`text-emphasis-style`	強調表示の形状を設定します。
`text-emphasis-color`	強調表示の色を設定します。

注意してください！
テキストの強調表示位置を指定するtext-emphasis-positionプロパティは、強調表示の形状と色を一度に指定するショートハンドプロパティであるtext-emphasisではリセットできません。

テキストに対する強調表示の適用範囲

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

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

ご注意ください！
仕様書では、今後テキストに対する強調表示の適用範囲が追加される可能性があることが言及されています。

形式の定義

text-emphasisプロパティの形式定義
初期値	各ショートハンドプロパティごとに： `text-emphasis-style`：`none` `text-emphasis-color`：`currentcolor`（現在の文字色）
適用対象要素	すべての要素
継承	はい

例

キーワード値と色の値

キーワード値と色の値に関する注意点

CSS

p span {
    text-emphasis: open red circle;
    /*
        text-emphasis-styleの値が2つある場合、
        text-emphasis-colorの値はその間に置くことはできません。
    */
}

『カスタム文字』

注意点

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