CSSのtext-emphasisで文字に上点の強調マークを付ける方法をわかりやすく解説

2024.09.15
スポンサーリンク

text-emphasisプロパティは、テキストに対して装飾マークを付け、強調するために使用されます。特に縦書きの文書で役立ちますが、横書きにも適用可能です。

スポンサーリンク

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

  • circle: 円形のマークを付けます。
  • dot: 点のマークを付けます。
  • open: 空心の丸（開いた丸）を付けます。
  • triangle: 三角形のマークを付けます。
  • double-circle: 二重丸のマークを付けます。

注意点と関連情報

text-emphasisプロパティは、特に縦書き文書で使用されることが多いですが、横書きの文書でも利用可能です。マークの種類により、テキストの強調具合が変わります。また、text-emphasis-colorプロパティでマークの色を変更することもできます。

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

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

text-emphasisは、縦書きレイアウトや日本語、中国語などの東アジアの文字での強調表現のために使われます。デフォルトの横書き（writing-mode: horizontal-tb）では、効果が視覚的にわかりにくくなることがあります。

対策: writing-modeを縦書きに設定します。例えば、writing-mode: vertical-rl;やwriting-mode: vertical-lr;を指定して、text-emphasisを適切に使用できるようにします。writing-mode: vertical-rl; text-emphasis: dot;のように設定します。

インライン要素に適用されていない

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

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

共通する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: circle

テキストに円形の強調マークを付けます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-circle">
    これは円形のマークが付いたテキストです。
  </div>
</div>

CSSコード

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

表示結果

これは円形のマークが付いたテキストです。

text-emphasis: dot

テキストに点の強調マークを付けます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-dot">
    これは点のマークが付いたテキストです。
  </div>
</div>

CSSコード

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

表示結果

これは点のマークが付いたテキストです。

text-emphasis: open

テキストに開いた丸（空心の丸）を付けます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-open">
    これは開いた丸のマークが付いたテキストです。
  </div>
</div>

CSSコード

.css-sample-text-open {
  text-emphasis: open;
}

表示結果

これは開いた丸のマークが付いたテキストです。

text-emphasis: triangle

テキストに三角形の強調マークを付けます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-triangle">
    これは三角形のマークが付いたテキストです。
  </div>
</div>

CSSコード

.css-sample-text-triangle {
  text-emphasis: triangle;
}

表示結果

これは三角形のマークが付いたテキストです。

text-emphasis: double-circle

テキストに二重丸の強調マークを付けます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-double-circle">
    これは二重丸のマークが付いたテキストです。
  </div>
</div>

CSSコード

.css-sample-text-double-circle {
  text-emphasis: double-circle;
}

表示結果

これは二重丸のマークが付いたテキストです。

まとめ

  • text-emphasisプロパティは、テキストに装飾マークを付けて強調するためのプロパティです。
  • 5つの異なるマーク (circle, dot, open, triangle, double-circle) を指定できます。
  • text-emphasis-colorプロパティを使うことで、マークの色を変更することが可能です。
  • 特に縦書き文書で使用されることが多いですが、横書き文書でも利用できます。
スポンサーリンク