/
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: '▶' aquamarine; | 下置き・・・ |
- 日本語横書きの場合 over が初期値。上置きは指定しなくてもOKです。(上の例は一応^^;)
- 縦書きも混じる場合は
over rightのように併せて指定します