CSSのtext-emphasisプロパティとは？テキストを傍点で強調する方法

CSS text-emphasisプロパティの基本

text-emphasisプロパティは、テキストに傍点（ぼうてん・圏点）を付けて強調表示するためのCSSプロパティです。重要な語句や注目してほしい部分を目立たせたいときに便利で、従来は<em>タグなどでの装飾に頼っていた表現を、CSSだけで実現できます。

構文（シンタックス）

text-emphasis: text-emphasis-style text-emphasis-color;

text-emphasisはショートハンド（一括指定）プロパティであり、以下の2つの個別プロパティをまとめて指定することができます。

• text-emphasis-style： 要素のテキストに付ける傍点（強調マーク）の形状を指定します。「filled dot（塗りつぶしの点 ●）」「open dot（中空の点 ○）」「filled circle」「double circle」など、さまざまな種類が用意されています。
• text-emphasis-color： 傍点の色（前景色）を指定します。初期値はcurrentColorで、テキストと同じ色が適用されます。

記述例

em {
  text-emphasis: filled dot #e74c3c;
}

この例では、em要素内のテキストに対して、赤色の塗りつぶしドット（●）が上付きで表示されます。

補足ポイント

• 傍点を表示する位置（上または下）を変更したい場合は、text-emphasis-positionプロパティを使用します。
• 縦書きテキスト（writing-mode: vertical-rl;）との組み合わせにも対応しており、日本語の組版において特に有用なプロパティです。
• 主要なモダンブラウザでサポートされていますが、古いブラウザではベンダープレフィックスが必要な場合があるため、必要に応じて確認してください。