text-emphasis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

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

試してみましょう

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

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

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

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* 初期値 */
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: revert;
text-emphasis: revert-layer;
text-emphasis: unset;

none

圏点なし。

filled

図形が単色で塗りつぶされます。 filledopen も指定されていない場合は、これが既定値です。

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 = 
<'text-emphasis-style'> ||
<'text-emphasis-color'>

<text-emphasis-style> =
none |
[ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] |
<string>

<text-emphasis-color> =
<color>

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

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

CSS

css
h2 {
  text-emphasis: triangle #d55;
}

HTML

html
<h2>これは重要です!</h2>

結果

仕様書

Specification
CSS Text Decoration Module Level 3
# text-emphasis-property

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-emphasis

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報