CSSのtext-emphasis-positionで強調マークの位置を指定する方法をわかりやすく解説

2024.09.15
スポンサーリンク

text-emphasis-positionプロパティは、text-emphasisプロパティで指定した強調マークの位置を設定するために使用されます。マークはテキストの上（over）、下（under）、左（left）、右（right）に配置できます。

スポンサーリンク

text-emphasis-positionの値とその効果の一覧

  • over: 強調マークをテキストの上に配置します。
  • under: 強調マークをテキストの下に配置します。
  • left: 強調マークをテキストの左側に配置します。
  • right: 強調マークをテキストの右側に配置します。

注意点と関連情報

text-emphasis-positionプロパティは、特に縦書きや言語によってマークの配置が重要となる場合に有効です。通常、over（上）とunder（下）の組み合わせで使用されますが、左または右に設定することも可能です。

text-emphasis-positionが効かない時の原因と対策

ブロックレベル要素に適用されていない

text-emphasis-positionはインライン要素やインライン要素を含むブロックレベル要素に対して効果を発揮します。ブロックレベル要素に直接適用しても効果が現れない場合があります。

対策: インライン要素（<span>, <a>, <em>など）にtext-emphasis-positionを適用します。例えば、<span style="text-emphasis: circle; text-emphasis-position: under left;">のように指定します。

writing-modeが適切に設定されていない

text-emphasis-positionは縦書きレイアウトで効果を発揮するプロパティであり、writing-modeが適切に設定されていない場合、期待通りの位置に強調記号が表示されません。特に、横書き（horizontal-tb）では効果が分かりにくくなることがあります。

対策: writing-modeを確認し、縦書きに設定することでtext-emphasis-positionの効果がわかりやすくなります。例えば、writing-mode: vertical-rl; text-emphasis-position: over right;のように指定します。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 300px;
  background-color: #f9f9f9;
}

.css-sample-text {
  border: 1px solid #999;
  padding: 10px;
  font-size: 16px;
}

text-emphasis-position: over

テキストの上に強調マークを配置します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-over">
    テキストの上に円形マークを配置します。
  </div>
</div>

CSSコード

.css-sample-text-over {
  text-emphasis: circle;
  text-emphasis-position: over;
}

表示結果

テキストの上に円形マークを配置します。

text-emphasis-position: under

テキストの下に強調マークを配置します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-under">
    テキストの下に点マークを配置します。
  </div>
</div>

CSSコード

.css-sample-text-under {
  text-emphasis: dot;
  text-emphasis-position: under;
}

表示結果

テキストの下に点マークを配置します。

text-emphasis-position: left

テキストの左に強調マークを配置します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-left">
    テキストの左に開いた丸マークを配置します。
  </div>
</div>

CSSコード

.css-sample-text-left {
  text-emphasis: open;
  writing-mode: vertical-rl;
  text-emphasis-position: left;
}

表示結果

テキストの左に開いた丸マークを配置します。

text-emphasis-position: right

テキストの右に強調マークを配置します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-right">
    テキストの右に三角形マークを配置します。
  </div>
</div>

CSSコード

.css-sample-text-right {
  text-emphasis: triangle;
  writing-mode: vertical-rl;
  text-emphasis-position: right;
}

表示結果

テキストの右に三角形マークを配置します。

まとめ

  • text-emphasis-positionプロパティは、text-emphasisで指定した強調マークの位置を変更します。
  • 上（over）、下（under）、左（left）、右（right）の4つの位置を指定できます。
  • 通常はoverとunderの組み合わせが一般的です。
  • 特定の言語やデザイン要件に応じて、左右の配置を使用することも可能です。
スポンサーリンク