【CSS Modules】text-emphasis-colorプロパティの使い方

text-emphasis-colorプロパティは、テキストに付与される強調マークの色を保持するプロパティです。このプロパティはCSS Modulesの一部として定義されており、主に東アジアの言語における傍点や圏点のような視覚的な強調表現に利用されます。

強調マークをテキストに適用するには、text-emphasis-colorプロパティ単独では機能しません。強調マークの種類（形状やスタイル）を決定するtext-emphasis-styleプロパティと組み合わせて使用する必要があります。text-emphasis-colorプロパティは、text-emphasis-styleで指定された強調マークの色のみを制御します。

指定できる値は、CSSで利用可能な標準的な色表現すべてです。例えば、redやblueといったキーワード、#RRGGBB形式のHEX値、rgb(R, G, B)やrgba(R, G, B, A)形式のRGB/RGBA値などが挙げられます。これにより、Webデザイナーはテキストの強調マークをサイト全体のカラースキームに合わせて柔軟に調整できます。

初期値はcurrentcolorであり、これは現在の要素の文字色と同じ色を意味します。したがって、text-emphasis-colorプロパティを明示的に指定しない場合、強調マークはテキスト本体と同じ色で表示されます。

一般的には、text-emphasis-styleとtext-emphasis-colorの両方をまとめて設定できるショートハンドプロパティであるtext-emphasisを使用することが推奨されます。これにより、コードの簡潔性が保たれ、管理が容易になります。このプロパティは、Webページ上で特定の情報やキーワードを視覚的に際立たせ、読者の注意を引きたい場合に効果的なツールとなります。

Copy
1.element {
2  text-emphasis-color: red;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません