text-emphasis

CSS の text-emphasis プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは text-emphasis-style と text-emphasis-color の一括指定です。

text-emphasis プロパティは、 text-decoration とは大きく異なります。 text-decoration プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 text-emphasis は継承されます。これは、子孫に対して圏点を変更できることを意味します。

圏点の大きさは、ルビと同様にフォントの大きさの約50%であり、 text-emphasis は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。

text-emphasis は、 text-emphasis-position の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。稀にこれを必要とする場合は、プロパティ text-emphasis-position を使用してください。

構文

/* 初期値 */
text-emphasis: none; /* 圏点なし */

/* <string> 値 */
text-emphasis: 'x';
text-emphasis: '点';
text-emphasis: '\25B2';
text-emphasis: '*' #555;
text-emphasis: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */

/* キーワード値 */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/* 色と組み合わせたキーワード値 */
text-emphasis: filled sesame #555;

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

値

none: 圏点なし。
filled: 図形は単色で塗りつぶされます。 filled も open も指定されない場合は、これが既定値です。
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>: 記号として文字列を表示します。 <string> には1文字を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。
<color>: 記号の色を定義します。 color を指定しない場合、既定では currentColor です。

形式文法

<'text-emphasis-style'> || <'text-emphasis-color'>

例

強調して色を付けた見出し

この例は、見出しの各文字に三角形の圏点を付けて描画します。

CSS

h2 {
  text-emphasis: triangle #D55;
}

HTML

<h2>これは重要です！</h2>

結果

仕様書

仕様書	状態	備考
CSS Text Decoration Module Level 3 text-emphasis の定義	勧告候補	初回定義

初期値	一括指定の次の各プロパティとして `text-emphasis-style`: `none` `text-emphasis-color`: `currentcolor`
適用対象	すべての要素
継承	なし
計算値	一括指定の次の各プロパティとして `text-emphasis-style`: 指定通り `text-emphasis-color`: 色の計算値
アニメーションの種類	一括指定の次の各プロパティとして `text-emphasis-color`: 色 `text-emphasis-style`: 離散値

ブラウザーの対応

BCD tables only load in the browser