Mill's Note

【CSS-rules】text-emphasis

/

text-emphasis は、テキストに圏点(けいてん = 強調や注意を促すための装飾) を付けられるプロパティ。
色だけでなく形状もかなり自由に設定できるので、ちょっと違った強調文が作れます。

強調テキストといえば、太字や赤字、マーカーなどがシンプルなものが一般的ですが、text-emphasisは規定装飾はもちろん、1文字であれば文字でもOK。特殊文字を使った面白い表現もできますよ^^

text-emphasis の指定方法 (一括指定)

スタイルと色を一括で指定します。

CSS code
text-emphasis: 1-style 2-color;
text-emphasis-position: over; /* 位置は別指定 */

個別の値とサンプル

1 – 装飾のスタイル text-decoration-line:

表示例
dot;ドット・・・
circle;大き目の円・・
double-circle;二重丸・・・
sesame;ゴマ点・・・
triangle;三角・・・
triangle open;open指定で中抜きも
'◆';テキスト指定
'\02665';16進指定

2 – 装飾の色 text-emphasis-color:

表示例
dot red;赤ドット・・・
circle #FFE500;黄色円・・・
double-circle rgb(0,211,37);緑二重丸・・
circle open deepskyblue;青中抜き
sesame #f00;赤ゴマ点・・・
\02665 deeppink;16進指定

色は通常の色指定と同じ。上例はtext-emphasis:での一括指定にしています

  • 行の高さ(line-height)が足りない場合は、行の高さが広げられます。
  • 圏点(けいてん)サイズはテキストの50%です。(サイズ指定はできません)
  • open(中抜き)は「キーワード値」のみ、テキストや16進(数値文字参照)には適用されません。
  • 特殊文字は content と同様、16進(数値文字参照) を利用します。

text-emphasis-position 圏点(けいてん)の位置

over横書き → テキストの上 (初期値)
under横書き → テキストの下
right縦書き → テキストの右
left縦書き → テキストの左
text-emphasis: circle red;
text-emphasis-position: over right;
上置き・・・
text-emphasis: '▶' aquamarine;
text-emphasis-position: under;
下置き・・・
  • 日本語横書きの場合 over が初期値。上置きは指定しなくてもOKです。(上の例は一応^^;)
  • 縦書きも混じる場合は over right のように併せて指定します