概要
text-emphasis-styleは、CSSでテキストにアクセントマーク（点や丸、三角形など）を付けて強調するためのプロパティです。このプロパティを使用することで、縦書きや横書きのテキストに視覚的なアクセントを加えることができます。日本語や中国語のような縦書き文化のある言語で特に効果的で、重要な単語やフレーズを強調する際に活用されます。
text-emphasis-styleの基本構文
text-emphasis-style: <fill> || <shape>;
text-emphasis-style: <string>;値の説明
塗りつぶしの指定（fill）
| 値 | 説明 |
|---|---|
filled | マークを塗りつぶして表示します（デフォルト） |
open | マークを中抜きで表示します |
形状の指定（shape）
| 値 | 説明 | filled | open |
|---|---|---|---|
dot | 小さな点を表示 | • | ◦ |
circle | 大きな丸を表示 | ● | ○ |
double-circle | 二重丸を表示 | ◉ | ◎ |
triangle | 三角形を表示 | ▲ | △ |
sesame | ゴマ点を表示 | ﹅ | ﹆ |
その他の値
| 値 | 説明 |
|---|---|
none | アクセントマークを付けません |
<string> | 任意の1文字をアクセントマークとして使用 |
使用例
基本的な使用例 - 塗りつぶしと中抜きの比較
/* 塗りつぶしの丸（デフォルト） */
.emphasis-filled {
text-emphasis-style: filled circle;
}
/* 中抜きの丸 */
.emphasis-open {
text-emphasis-style: open circle;
}
/* filledを省略した場合も塗りつぶし */
.emphasis-circle {
text-emphasis-style: circle;
}<p class="emphasis-filled">重要なテキストを強調します</p>
<p class="emphasis-open">中抜きの丸で強調します</p>縦書きテキストでの強調
日本語の縦書きテキストでアクセントマークを付ける実践的な例です。
.vertical-text {
writing-mode: vertical-rl;
text-emphasis-style: sesame;
text-emphasis-position: over right; /* 右側にマークを配置 */
font-size: 1.2rem;
line-height: 2;
}
/* 重要な箇所のみ強調 */
.vertical-text em {
text-emphasis-style: filled dot;
font-style: normal;
}<p class="vertical-text">
日本語の縦書きで<em>重要な部分</em>を強調できます。
</p>カスタム文字をアクセントマークとして使用
任意の文字を1文字だけ指定できます。絵文字も使用可能です。
/* アスタリスクをアクセントマークとして使用 */
.emphasis-asterisk {
text-emphasis-style: '*';
}
/* ハートマーク */
.emphasis-heart {
text-emphasis-style: '♥';
}
/* 絵文字 */
.emphasis-star {
text-emphasis-style: '⭐';
}text-emphasis-colorとの組み合わせ
text-emphasis-colorプロパティと組み合わせることで、アクセントマークに色を付けられます。
/* 赤い丸でアクセント */
.emphasis-red {
text-emphasis-style: filled circle;
text-emphasis-color: #e53935;
}
/* 青い三角形 */
.emphasis-blue {
text-emphasis-style: filled triangle;
text-emphasis-color: #1e88e5;
}
/* ショートハンドで一括指定 */
.emphasis-combined {
text-emphasis: filled sesame #ff9800;
}警告文やエラーメッセージでの活用
/* 警告メッセージ */
.warning-text {
text-emphasis-style: filled triangle;
text-emphasis-color: #f57c00;
text-emphasis-position: under;
}
/* エラーメッセージ */
.error-text {
text-emphasis-style: filled dot;
text-emphasis-color: #d32f2f;
}
/* 成功メッセージ */
.success-text {
text-emphasis-style: filled circle;
text-emphasis-color: #388e3c;
}<p class="warning-text">この操作は取り消せません</p>
<p class="error-text">入力内容に誤りがあります</p>
<p class="success-text">登録が完了しました</p>ルビ（振り仮名）との併用
縦書きでルビとアクセントマークを併用する場合の例です。
.ruby-emphasis {
writing-mode: vertical-rl;
}
.ruby-emphasis ruby {
text-emphasis-style: filled dot;
text-emphasis-position: over right;
}
/* ルビとアクセントの位置調整 */
.ruby-emphasis rt {
font-size: 0.5em;
}<p class="ruby-emphasis">
<ruby>強調<rt>きょうちょう</rt></ruby>したい文字
</p>実用的なシナリオ
縦書きテキストでの強調
日本語や中国語など、縦書きの文章でアクセントを付けることで、重要な部分を強調できます。新聞や雑誌、書籍のデザインで頻繁に利用される手法です。
特定の言葉やフレーズを目立たせる
特定の単語やフレーズを視覚的に目立たせたいときに、アクセントマークを付けることで強調できます。特に縦書きのレイアウトでは、こうしたマークが流れを乱すことなく自然に組み込めます。
ブランディングやスタイルに合わせたデザイン
ブランドの個性を表現するために、特定のアクセントマークを使用して独自のスタイルを作り上げることができます。
ブラウザサポート
text-emphasis-styleは主要なモダンブラウザでサポートされています。
| ブラウザ | サポート状況 |
|---|---|
| Chrome | 99以降 |
| Firefox | 46以降 |
| Safari | 7以降（-webkit-プレフィックス付き） |
| Edge | 99以降 |
Safari では -webkit-text-emphasis-style としてプレフィックスが必要な場合があります。
/* クロスブラウザ対応 */
.emphasis-compatible {
-webkit-text-emphasis-style: filled circle;
text-emphasis-style: filled circle;
}注意点
- アクセントの配置とテキストの読みやすさ: アクセントマークがテキストの視認性を損なわないように注意が必要です。装飾が過剰にならないよう調整しましょう。
- 横書きでの使用: 主に縦書き用に設計されていますが、横書きでも適用可能です。横書きの場合、
text-emphasis-positionでoverまたはunderを指定してマークの位置を調整できます。 - フォントとの相性: 使用するフォントによってアクセントマークの見え方が異なる場合があります。特にカスタム文字を使用する場合は、表示を確認してください。
まとめ
text-emphasis-styleは、CSSでテキストにアクセントマークを追加し、デザインの質を高めるための有用なプロパティです。filledとopenの組み合わせ、text-emphasis-colorとの連携、カスタム文字の使用など、多彩な表現が可能です。縦書きの日本語テキストにおいて特に効果的で、重要な単語を視覚的に引き立てることができます。
