CSSのtext-emphasis-styleでテキストの強調スタイルを設定する方法をわかりやすく解説

text-emphasis-styleプロパティは、文字の強調表示（ルビなど）に使用されるスタイルを定義します。日本語の縦書きで多く使用されるプロパティですが、横書きでも使用可能です。

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

dot: 点で強調表示します。
circle: 円で強調表示します。
double-circle: 二重丸で強調表示します。
filled: 塗りつぶされた記号で強調表示します。
open: 枠線だけの記号で強調表示します。
triangle: 三角形で強調表示します。

注意点と関連情報

text-emphasis-styleは通常、日本語の縦書きレイアウトで使用され、漢字のふりがなや強調表示に利用されます。また、横書きでも適用可能ですが、特に縦書き環境でその効果が最も顕著です。ほとんどのブラウザが対応していますが、一部の古いブラウザではサポートされていない可能性があるため、互換性に注意が必要です。

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

text-emphasisプロパティが設定されていない

text-emphasis-styleは、テキストに対する強調記号（点、丸、線など）のスタイルを指定するプロパティですが、text-emphasisが設定されていないと効果が現れません。

対策: text-emphasisプロパティを設定します。例えば、text-emphasis: filled;やtext-emphasis: open;と組み合わせて使用します。text-emphasis-style: circle; text-emphasis: filled;のように設定します。

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

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

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

共通するCSSコード

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

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

text-emphasis-style: 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-style: dot;
}

表示結果

点で強調表示されます。

text-emphasis-style: 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-style: circle;
}

表示結果

円で強調表示されます。

text-emphasis-style: 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-style: double-circle;
}

表示結果

二重丸で強調表示されます。

text-emphasis-style: filled

塗りつぶされた記号で文字を強調表示します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-filled">
    塗りつぶされた記号で強調表示されます。
  </div>
</div>

CSSコード

.css-sample-text-filled {
  text-emphasis-style: filled;
}

表示結果

塗りつぶされた記号で強調表示されます。

text-emphasis-style: 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-style: open;
}

表示結果

枠線だけの記号で強調表示されます。

text-emphasis-style: 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-style: triangle;
}

表示結果

三角形で強調表示されます。

まとめ

text-emphasis-styleは、日本語の縦書きや横書きの文章において文字の強調を示すために使用されます。
「点」「円」「二重丸」「塗りつぶし」「枠線」「三角形」などのスタイルがあります。
特に日本語の縦書きで使用されることが多いですが、横書きでも効果的に使用できます。
ブラウザ互換性に注意が必要です。