text-emphasis
CSS の text-emphasis
プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは text-emphasis-style
と text-emphasis-color
の一括指定です。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
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
です。
形式文法
例
強調して色を付けた見出し
この例は、見出しの各文字に三角形の圏点を付けて描画します。
CSS
h2 {
text-emphasis: triangle #D55;
}
HTML
<h2>これは重要です!</h2>
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Text Decoration Module Level 3 text-emphasis の定義 |
勧告候補 | 初回定義 |
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- 個別指定プロパティ:
text-emphasis-style
,text-emphasis-color
- 圏点の位置の定義を可能にする
text-emphasis-position
プロパティ。