Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

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

text-emphasis-styleプロパティの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

text-emphasis-styleプロパティは、テキストに表示される強調マーク(傍点)のスタイルを保持するプロパティです。このプロパティは、主に東アジアの言語圏で文章の特定の箇所を視覚的に強調するために用いられる傍点の見た目を定義します。

具体的には、傍点の形状や、それが塗りつぶされているか中空であるかといったスタイルを指定できます。例えば、none を指定すると傍点は表示されません。filled は傍点を塗りつぶし、open は中空の傍点にします。形状としては、dot で小さな丸、circle で大きめの丸、double-circle で二重丸、triangle で三角、sesame でごまのような形を設定できます。これらのキーワードは filled または open と組み合わせて使用され、例えば filled dot は塗りつぶされた小さな丸を、open circle は中空の大きめの丸を表示します。

また、text-emphasis-styleプロパティでは、特定の文字列を傍点として使用することも可能です。この場合、例えば text-emphasis-style: '※' のように任意の文字列リテラルを引用符で囲んで指定します。

このプロパティは、傍点のスタイルと色を一度に設定できるショートハンドプロパティである text-emphasis の一部でもあります。文章内で特定の情報を視覚的に目立たせたい場合に活用され、読み手にとって重要なポイントを直感的に把握しやすくする効果があります。ブラウザによっては表示の挙動が異なる場合があるため、使用時には確認することをお勧めします。

公式リファレンス: text-emphasis-style

構文(syntax)

1selector {
2  text-emphasis-style: filled dot;
3}

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ

関連プログラミング言語