日本語の「傍点」をCSSで美しく操る――`text-emphasis`の深淵と現場の知見
フロントエンド開発の現場で、デザインカンプに「ここ、傍点（ぼうてん）でお願いします」と書かれているのを見て、一瞬顔をしかめた経験はありませんか？
昔であれば画像で切り出すか、一文字ずつ`span`で囲って擬似要素を当てる……なんていう「力技」が横行していましたが、今は違います。CSSには`text-emphasis`という、日本語タイポグラフィのために用意された強力な武器があります。
今日は、単なるプロパティの解説にとどまらず、ブラウザの挙動や、アクセシビリティを考慮した「現場で恥をかかないための実装」について深掘りしていきましょう。
—
なぜ `text-emphasis` を使うのか？
昔ながらの``を多用する手法は、HTMLの構造を汚すだけでなく、音声ブラウザ（スクリーンリーダー）が読み上げる際に悪影響を及ぼすリスクがあります。「て・ん・て・ん」と一文字ずつ読み上げてしまうような悲劇は避けなければなりません。
`text-emphasis`は、テキストの構造を破壊することなく、CSSレイヤーで「視覚的な強調」を追加できるため、セマンティクスを損なわないという点で非常に優秀です。
ブラウザの裏側で何が起きているのか
ブラウザは`text-emphasis`が適用されると、その対象となる文字の上下（縦書きなら左右）に、指定された記号を自動的に配置します。注目すべきは、この記号は「テキストの一部」ではなく「装飾の一部」として処理される点です。つまり、コピー＆ペーストした際にも余計な記号が混入せず、アクセシビリティツリーにもノイズを与えません。
—
実践的コード：迷わず使えるCSSコンポーネント
まずは、現場でそのまま使えるクリーンな実装例を見てみましょう。
/ 傍点用のユーティリティクラス /
.text-emphasis-dot {
/ 傍点の形状と色を指定 /
/ 第1引数: 形状 (dot, circle, double-circle, triangle, sesame) /
/ 第2引数: 色 (省略時は現在の文字色) /
text-emphasis: sesame #ff4500;
/ 傍点の位置を調整（デフォルトは auto で、横書きなら上にくる） /
text-emphasis-position: under right;
}
/ 読み上げ時のノイズを最小限に抑えるためのアクセシビリティ調整 /
.text-emphasis-dot::before,
.text-emphasis-dot::after {
content: “”;
}
このプロジェクトの肝は、徹底的なUX設計にあります。
ポイント：`text-emphasis-position` を使いこなす
このプロパティの肝は、実は位置指定にあります。
- `over` (デフォルト): 横書きなら文字の上、縦書きなら右側。
- `under`: 横書きなら文字の下、縦書きなら左側。
日本語組版のルールでは、文脈によって傍点の位置を使い分けることが求められます。特に「ルビ（`ruby`要素）」と併用する場合は、ルビと傍点が重ならないよう、`under`を積極的に活用するのがシニアエンジニアの嗜みです。
—
現場で遭遇する「落とし穴」と回避策
理論上は完璧な`text-emphasis`ですが、実務では以下の2点に注意が必要です。
1. 行間（`line-height`）が広がる問題
`text-emphasis`を適用すると、文字の上下にスペースが生まれます。そのため、傍点を付けた行だけが他の行より浮いてしまい、行間が不揃いに見えることがあります。
対策: 傍点を使う箇所は `line-height` をわずかに広めに設定するか、`padding` で調整するなど、デザイン全体のバランスを注視してください。
2. ブラウザサポートの歴史的背景
IE11の時代は絶望的でしたが、現代のモダンブラウザ（Chrome, Firefox, Safari, Edge）であれば、ほぼ完璧にサポートされています。もし古いレガシー環境をサポートする必要があるなら、`@supports`ルールで切り分けるのも一つの手です。
@supports (text-emphasis: dot) {
.emphasis {
text-emphasis: dot;
}
}
/ 非対応ブラウザでは普通の太字にするなどのフォールバック /
@supports not (text-emphasis: dot) {
.emphasis {
font-weight: bold;
}
}
—
まとめ：技術は「何ができるか」より「どうあるべきか」
傍点を実装する際、単に「見た目が同じになれば良い」のではありません。検索エンジンが正しくテキストを認識し、スクリーンリーダーが読み上げを遮らず、CSSを外してもHTMLの意図が変わらないこと。これが、我々フロントエンドエンジニアが追求すべき品質です。
「この実装、本当にセマンティックかな？」と一度自問自答する。その少しの立ち止まりが、あなたのコードを、ひいてはプロダクトの価値を数段引き上げます。
さあ、明日からの実装で、ぜひこの`text-emphasis`を活用してみてください。もし「こんなパターンはどうするの？」という複雑な要件があれば、またいつでも聞いてください。一緒に解決しましょう。
コメント