text-emphasisで傍点やルビ風強調をCSSだけで実現する方法｜和風表現や縦書き対応も解説

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

文章の中で特定の言葉を目立たせたいとき、日本語では従来「傍点（・）」を使うのが一般的でした。
雑誌や書籍でもよく目にする表現ですが、Webでは画像や装飾文字で擬似的に表現するしかなく、実装が面倒だったのではないでしょうか？

そこで登場するのが CSSのtext-emphasisプロパティ。
これを使えば、文字の上や横に点や丸、記号を自動で付与して強調表現でき、ルビのような補助情報や視線誘導に活用できます。

この記事では、text-emphasisの基本から応用まで、実例とデザインバリエーションを交えて詳しく解説します。

text-emphasisとは？

書籍の組版で見られる「◦」「・」「●」などのマークを、横書き・縦書きのどちらでも簡単に実現できます。

指定できる主な値は以下の通りです。

基本的な使い方

.emphasis { 
　text-emphasis: dot red; 
　-webkit-text-emphasis: dot red; /* Safari対応 */ 
} 

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

このコードで、テキストの上に赤い点が付き、強調が一目でわかる表現になります。

デザインバリエーション

丸や点だけでなく、セサミ（ゴマ）や文字も使えるため、表現の幅は広いです。

.circle { 
text-emphasis: circle blue; 
} 
.sesame { 
text-emphasis: sesame green; 
} 
.custom { 
text-emphasis: "※" orange;
} 

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

これにより、

といった演出が可能です。

縦書き＋ルビ風に使う

.vertical { 
 writing-mode: vertical-rl; 
 text-emphasis: sesame #e74c3c; 
} 

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

縦書きの俳句や短歌、伝統的な和風レイアウトとの相性も抜群です。

対応ブラウザと注意点

まとめ