text-emphasis | Frontend Practical Guide

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`text-emphasis`	99	99	46	7	99	7
その他
`css.properties.text-emphasis-color` text-emphasis-color は CSS のプロパティで、圏点の色を設定します。この値は一括指定の text-emphasis を使用して設定することもできます。	99	99	46	7	99	7
`css.properties.text-emphasis-position` text-emphasis-position は CSS のプロパティで、圏点が描かれる位置を設定します。要素で描画されたテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。	99	99	46	7	99	7
CSS プロパティ
`auto` 実験的非標準			132
`left`	62	79	46	8	62	8
`over`	99	99	108	7	99	7
`right`	62	79	46	8	62	8
`under`	99	99	108	7	99	7
その他
`css.properties.text-emphasis-style` text-emphasis-style は CSS のプロパティで、圏点の表示を設定します。設定やリセットに一括指定の text-emphasis を使用することもできます。	99	99	46	7	99	7
CSS プロパティ
`circle`	99	99	46	7	99	7
`dot`	99	99	46	7	99	7
`double-circle`	99	99	46	7	99	7
`filled`	99	99	46	7	99	7
`none`	99	99	46	7	99	7
`sesame`	99	99	46	7	99	7
`triangle`	99	99	46	7	99	7

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

/* Basic emphasis */
.emphasis {
  text-emphasis: filled sesame;
  text-emphasis-color: #333;
}

/* Shorthand + position */
.emphasis-bottom {
  text-emphasis: filled dot #e63946;
  text-emphasis-position: under right;
}

ライブデモ

sesameemphasis mark

text-emphasis sesameemphasis mark demo.

プレビュー全画面表示

roundedemphasis mark(red)

text-emphasis roundedemphasis mark(red) demo.

プレビュー全画面表示

triangleemphasis mark(bottomside)

text-emphasis triangleemphasis mark(bottomside) demo.

プレビュー全画面表示

実務での使いどころ

日本語テキストの強調

日本語の文章で重要な語句に圏点を付け、伝統的な強調表現を行う。

注意点

圏点は行間を広げるため、line-height の調整が必要になる場合がある。
ラテン文字ベースの言語では馴染みがなく、太字や斜体で代用されることが多い。

対応ブラウザ

基本構文

ライブデモ

sesameemphasis mark

roundedemphasis mark(red)

triangleemphasis mark(bottomside)

実務での使いどころ

日本語テキストの強調

注意点

アクセシビリティ

参考リンク