【CSS Modules】text-emphasis省略形プロパティの使い方
text-emphasis省略形プロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
text-emphasisプロパティは、テキストに付ける強調マークのスタイルと色に関する設定を保持するプロパティです。
このプロパティは、主に日本語や中国語のような表意文字を使用する言語において、テキストの特定の文字や単語を視覚的に強調するために使用されるCSSのショートハンドプロパティです。例えば、重要な語句に傍点（圏点）を付与することで、文章のニュアンスや筆者の意図をより正確に読者に伝えることができます。
text-emphasisプロパティは、二つの個別プロパティの値を一括で設定することができます。一つは、強調マークの種類（例えば、点、丸、三角形、ゴマなど）や、マークが中抜きか塗りつぶしか（openまたはfilled）、そして文字のどの位置に表示されるか（beforeまたはafter）を指定するtext-emphasis-styleです。もう一つは、強調マーク自体の色を指定するtext-emphasis-colorです。
これらの設定をtext-emphasis: <style> <color>;のように一度に記述することで、コードの記述を簡潔にし、可読性を向上させることができます。例えば、「text-emphasis: filled dot red;」と指定すると、対象となるテキストの各文字の上に、赤色で塗りつぶされた小さな点が強調マークとして表示されます。
このプロパティを活用することで、Webコンテンツにおいてテキストの表現力を高め、特に東アジアの言語文化圏における文書の慣習的な強調表現をWeb上で実現することが可能になります。
構文(syntax)
1.element { 2 text-emphasis: filled circle red; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません