HTML & CSS

リファレンス

CSS

テキスト エンファシス ポジション

text-emphasis-positionプロパティ

テキストの圏点(文字の上下左右に付ける点)を表示する位置を指定するプロパティです。

  • 初期値

    over right

  • 継承

    不可

  • 適用できる要素

    全要素

text-emphasisプロパティを使ってテキストの強調したい箇所に印をつけるときに、テキストの上下どちらに印を表示するかをtext-emphasis-positionプロパティで指定することができます。

  • over – 横書きテキストに対し、上側に印を表示する。初期値
  • under – 横書きテキストに対し、下側に印を表示する。
  • right – 縦書きテキストに対し、右側に印を表示する。初期値
  • left – 横書きテキストに対し、左側に印を表示する。
text-emphasis-positionプロパティの設定例

Note

このプロパティは2018年12月現在、IE11とEdgeは対応していません。

使用例

text-emphasis-positionプロパティの値の指定は、「over right」のように「 (半角スペース)」で区切って横書きのときの位置、縦書きのときの位置を2つ指定します。
順番はどちらが先でも大丈夫です。
1つしか指定しなかった場合、指定した内容が表示に反映されないので注意してください。

2018年12月現在、Chrome、Operaに反映させるにはベンダープレフィックス「-webkit-」をつけて指定する必要があります。

横書きのテキストに対して印の位置を指定する

横書きテキストの上下に印を表示する例です。
上側に表示する「over」か、下側に表示する「under」のいずれかを指定します。

HTMLコード例

<p class="sample1">テキストの<span>強調したい部分</span>に印を表示する。</p>
<p class="sample2">印の位置は<span>任意</span>で設定することができる。</p>

CSSコード例

.sample1 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
	text-emphasis-position: over right;
	-webkit-text-emphasis-position: over right;
}
.sample2 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
	text-emphasis-position: under left;
	-webkit-text-emphasis-position: under left;
}
ブラウザの表示例

縦書きのテキストに対して印の位置を指定する

続いて、縦書きのテキストの場合に印を左右に表示する指定を行います。
テキストの右側に表示する「right」か、左側に表示する「left」のいずれかを指定します。

HTMLコード例

<p class="sample3"><span>縦書きのテキスト</span>についても印の位置を指定できる。</p>
<p class="sample4">縦書きの場合は<span>左か右</span>のいずれかを指定する。</p>

CSSコード例

.sample3 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
	text-emphasis-position: over right;
	-webkit-text-emphasis-position: over right;
}
.sample4 span {
	text-emphasis-style: circle;
	-webkit-text-emphasis-style: circle;
	text-emphasis-position: over left;
	-webkit-text-emphasis-position: over left;
}
ブラウザの表示例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。