CSSのtext-emphasis-colorで文字の強調マークの色を指定する方法をわかりやすく解説

2024.09.15
スポンサーリンク

text-emphasis-colorプロパティは、text-emphasisプロパティで指定したマークの色を変更するために使用されます。強調したいテキストに応じて、さまざまな色を指定することができます。

スポンサーリンク

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

  • red: 強調マークを赤色にします。
  • blue: 強調マークを青色にします。
  • green: 強調マークを緑色にします。
  • yellow: 強調マークを黄色にします。

注意点と関連情報

text-emphasis-colorプロパティは、text-emphasisと組み合わせて使用します。色を指定しない場合、デフォルトの色は親要素のテキストの色と同じになります。適切なコントラストを保つようにすることが重要です。

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

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

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

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

text-emphasis-positionが影響している

text-emphasis-positionが適切に設定されていない場合、強調記号の位置が目立たず、text-emphasis-colorの効果がわかりにくくなることがあります。特に、上下の位置が合っていないと、強調記号が適切に表示されません。

対策: text-emphasis-positionを適切に設定し、強調記号の表示位置を調整します。例えば、text-emphasis-position: over right;やtext-emphasis-position: under left;など、表示させたい場所に応じて設定します。

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

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

HTMLコード

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

CSSコード

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

表示結果

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

text-emphasis-color: blue

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

HTMLコード

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

CSSコード

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

表示結果

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

text-emphasis-color: green

テキストに開いた丸の強調マークを緑色で付けます。

HTMLコード

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

CSSコード

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

表示結果

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

text-emphasis-color: yellow

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

HTMLコード

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

CSSコード

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

表示結果

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

まとめ

  • text-emphasis-colorプロパティは、text-emphasisで指定したマークの色を変更するプロパティです。
  • マークの色を指定しない場合、テキストの色が使用されます。
  • マークの色は、適切なコントラストを保つように設定することが重要です。
  • text-emphasis-colorは、強調したいテキストに合わせてさまざまな色を選択できます。
スポンサーリンク